質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.54%

ヘッダーを固定表示、特定位置までスクロールでサイズ・色を変える

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 315

kana0701

score 17

前提・実現したいこと

●https://webdesignday.jp/inspiration/technique/css/4166/
●https://webdesignday.jp/samples/p4166/sample2/
上記のサンプル2を参考にヘッダーをデザインしたいと思っています。

発生している問題・エラーメッセージ

コピペでできるとのことだったのでやってみたのですが、
特定の位置に来てもtransformのクラスが追加されません。

該当のソースコード

    $(function) {
        var _window = $(window),
    _header = $('.site-header'),
    heroBottom;

_window.on('scroll',function(){
    heroBottom = $('.hero').height();
    if(_window.scrollTop() > heroBottom){
        _header.addClass('transform');   
    }
    else{
        _header.removeClass('transform');   
    }
});

_window.trigger('scroll');/
    }
body{
    background: #81bcd8;
}
.site-header{
    background: rgba(255,255,255,0.5);
    display: flex;
    padding: 60px 20px;
    position: fixed;
    justify-content: space-between;
    width: 100%;
}
.site-header.transform{
    background: rgba(255,255,255,0.9);
    padding: 20px;
}

.site-logo img{
    height: 20px;
    width: auto;
}
.gnav__menu{
    display: flex;
}
.gnav__menu__item{
    margin-left: 20px;
}
.gnav__menu__item a{
    color: #333;
    text-decoration: none;
}
.hero{
    max-height: 500px;
    overflow: hidden;
}
.hero img{
    height: auto;
    width: 100%;
}
.content{
    line-height: 1.6;
    margin: 0 auto;
    padding-top: 100px;
    width: 800px;
}
.content p{
    margin-bottom: 40px;
}
.site-footer{
    background: #333;
    padding: 80px 0;
}
.copyright{
    color: #fff;
    font-size: 12px;
    text-align: center;
}
<body>
    <header class="site-header">
        <h1 class="site-logo"><img src="logo.png" alt="WEBDESIGNDAY"></h1>
        <nav class="gnav">
            <ul class="gnav__menu">
                <li class="gnav__menu__item"><a href="">About</a></li>
                <li class="gnav__menu__item"><a href="">Works</a></li>
                <li class="gnav__menu__item"><a href="">Recruit</a></li>
                <li class="gnav__menu__item"><a href="">News</a></li>
                <li class="gnav__menu__item"><a href="">Contact</a></li>
            </ul>
        </nav>
    </header>    
    <div class="hero"><img src="hero.jpg" width="1600" height="1200" alt="hero"></div>
    <div class="content">
        <p>Lorem ipsum Enim do velit exercitation fugiat cillum labore et dolore ad minim dolor amet tempor nisi sunt Excepteur voluptate laborum et Duis labore cupidatat officia laboris minim cupidatat sit ad incididunt dolor in nulla elit sint do sit aliqua eu ut irure commodo exercitation dolore consequat est laborum Duis in dolore esse est dolore voluptate amet fugiat cupidatat Duis proident consequat nostrud Excepteur ea minim nisi eiusmod sed amet irure id ut officia occaecat nisi elit velit qui aliquip adipisicing consequat adipisicing aute laboris do consectetur sit officia elit in tempor aute eiusmod nulla dolore non sint in fugiat adipisicing amet quis in velit sit sunt Duis culpa deserunt Duis sed elit veniam exercitation Ut pariatur magna et id esse dolor dolore aliquip et in cillum commodo commodo et quis veniam magna irure laborum commodo enim tempor dolore velit ut adipisicing consequat dolore enim sunt eiusmod irure aliquip Duis magna laboris non in aliquip magna dolor dolore nulla nisi proident cupidatat laboris eu commodo adipisicing adipisicing ut aliquip eu aute veniam sint magna mollit nostrud ut sed consectetur et tempor consequat nisi nostrud dolore et officia adipisicing labore id enim nisi reprehenderit sunt fugiat ea Ut dolore sed eu in id velit esse et est labore eiusmod culpa adipisicing quis ea consectetur ea fugiat in culpa magna do laboris.</p>
        <p>Lorem ipsum Enim do velit exercitation fugiat cillum labore et dolore ad minim dolor amet tempor nisi sunt Excepteur voluptate laborum et Duis labore cupidatat officia laboris minim cupidatat sit ad incididunt dolor in nulla elit sint do sit aliqua eu ut irure commodo exercitation dolore consequat est laborum Duis in dolore esse est dolore voluptate amet fugiat cupidatat Duis proident consequat nostrud Excepteur ea minim nisi eiusmod sed amet irure id ut officia occaecat nisi elit velit qui aliquip adipisicing consequat adipisicing aute laboris do consectetur sit officia elit in tempor aute eiusmod nulla dolore non sint in fugiat adipisicing amet quis in velit sit sunt Duis culpa deserunt Duis sed elit veniam exercitation Ut pariatur magna et id esse dolor dolore aliquip et in cillum commodo commodo et quis veniam magna irure laborum commodo enim tempor dolore velit ut adipisicing consequat dolore enim sunt eiusmod irure aliquip Duis magna laboris non in aliquip magna dolor dolore nulla nisi proident cupidatat laboris eu commodo adipisicing adipisicing ut aliquip eu aute veniam sint magna mollit nostrud ut sed consectetur et tempor consequat nisi nostrud dolore et officia adipisicing labore id enim nisi reprehenderit sunt fugiat ea Ut dolore sed eu in id velit esse et est labore eiusmod culpa adipisicing quis ea consectetur ea fugiat in culpa magna do laboris.</p>
        <p>Lorem ipsum Enim do velit exercitation fugiat cillum labore et dolore ad minim dolor amet tempor nisi sunt Excepteur voluptate laborum et Duis labore cupidatat officia laboris minim cupidatat sit ad incididunt dolor in nulla elit sint do sit aliqua eu ut irure commodo exercitation dolore consequat est laborum Duis in dolore esse est dolore voluptate amet fugiat cupidatat Duis proident consequat nostrud Excepteur ea minim nisi eiusmod sed amet irure id ut officia occaecat nisi elit velit qui aliquip adipisicing consequat adipisicing aute laboris do consectetur sit officia elit in tempor aute eiusmod nulla dolore non sint in fugiat adipisicing amet quis in velit sit sunt Duis culpa deserunt Duis sed elit veniam exercitation Ut pariatur magna et id esse dolor dolore aliquip et in cillum commodo commodo et quis veniam magna irure laborum commodo enim tempor dolore velit ut adipisicing consequat dolore enim sunt eiusmod irure aliquip Duis magna laboris non in aliquip magna dolor dolore nulla nisi proident cupidatat laboris eu commodo adipisicing adipisicing ut aliquip eu aute veniam sint magna mollit nostrud ut sed consectetur et tempor consequat nisi nostrud dolore et officia adipisicing labore id enim nisi reprehenderit sunt fugiat ea Ut dolore sed eu in id velit esse et est labore eiusmod culpa adipisicing quis ea consectetur ea fugiat in culpa magna do laboris.</p>
    </div>
    <footer class="site-footer">
        <p class="copyright">@2017 WEBDESIGNDAY</p>
    </footer>
</body>

試したこと

jqueryの読み込ませ方が間違っているのかなと思い
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>を
head内で読み込ませたのですが違ったようです。
勉強中ですごく初歩的な質問でしたら申し訳ございません。
分かる方いらっしゃいましたらご教授いただきたいです。
よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • zushi0905

    2019/08/07 17:02

    htmlファイルとjqueryのフォルダ構成を載せてください。

    キャンセル

回答 1

checkベストアンサー

+4

Javascriptの記載ミスでは?
正しいソース

var _window = $(window),
    _header = $('.site-header'),
    heroBottom;

_window.on('scroll',function(){
    heroBottom = $('.hero').height();
    if(_window.scrollTop() > heroBottom){
        _header.addClass('transform');   
    }
    else{
        _header.removeClass('transform');   
    }
});

_window.trigger('scroll');


質問者さんのソース

$(function) {
    var _window = $(window),
    _header = $('.site-header'),
    heroBottom;

_window.on('scroll',function(){
    heroBottom = $('.hero').height();
    if(_window.scrollTop() > heroBottom){
        _header.addClass('transform');   
    }
    else{
        _header.removeClass('transform');   
    }
});

_window.trigger('scroll');/
    }


最初の$(function) {と最後の}いらないです。

正しくやった時の
ソース
フルビュー

追記

なんかちょっとよくわからないので以下のソースを完全にコピペしてください。

<!DOCTYPE html>
<html>
  <head>
    <title>TEST</title>
    <link rel="stylesheet" href="//codepen.io/asuchi0819/pen/aeqjZw.css">
  </head>
  <body>
    <header class="site-header">
      <h1 class="site-logo"><img src="logo.png" alt="WEBDESIGNDAY"></h1>
      <nav class="gnav">
        <ul class="gnav__menu">
          <li class="gnav__menu__item"><a href="">About</a></li>
          <li class="gnav__menu__item"><a href="">Works</a></li>
          <li class="gnav__menu__item"><a href="">Recruit</a></li>
          <li class="gnav__menu__item"><a href="">News</a></li>
          <li class="gnav__menu__item"><a href="">Contact</a></li>
        </ul>
      </nav>
    </header>    
    <div class="hero"><img src="https://placehold.jp/1600x1200.png" width="1600" height="1200" alt="hero"></div>
    <div class="content">
      <p>Lorem ipsum Enim do velit exercitation fugiat cillum labore et dolore ad minim dolor amet tempor nisi sunt Excepteur voluptate laborum et Duis labore cupidatat officia laboris minim cupidatat sit ad incididunt dolor in nulla elit sint do sit aliqua eu ut irure commodo exercitation dolore consequat est laborum Duis in dolore esse est dolore voluptate amet fugiat cupidatat Duis proident consequat nostrud Excepteur ea minim nisi eiusmod sed amet irure id ut officia occaecat nisi elit velit qui aliquip adipisicing consequat adipisicing aute laboris do consectetur sit officia elit in tempor aute eiusmod nulla dolore non sint in fugiat adipisicing amet quis in velit sit sunt Duis culpa deserunt Duis sed elit veniam exercitation Ut pariatur magna et id esse dolor dolore aliquip et in cillum commodo commodo et quis veniam magna irure laborum commodo enim tempor dolore velit ut adipisicing consequat dolore enim sunt eiusmod irure aliquip Duis magna laboris non in aliquip magna dolor dolore nulla nisi proident cupidatat laboris eu commodo adipisicing adipisicing ut aliquip eu aute veniam sint magna mollit nostrud ut sed consectetur et tempor consequat nisi nostrud dolore et officia adipisicing labore id enim nisi reprehenderit sunt fugiat ea Ut dolore sed eu in id velit esse et est labore eiusmod culpa adipisicing quis ea consectetur ea fugiat in culpa magna do laboris.</p>
      <p>Lorem ipsum Enim do velit exercitation fugiat cillum labore et dolore ad minim dolor amet tempor nisi sunt Excepteur voluptate laborum et Duis labore cupidatat officia laboris minim cupidatat sit ad incididunt dolor in nulla elit sint do sit aliqua eu ut irure commodo exercitation dolore consequat est laborum Duis in dolore esse est dolore voluptate amet fugiat cupidatat Duis proident consequat nostrud Excepteur ea minim nisi eiusmod sed amet irure id ut officia occaecat nisi elit velit qui aliquip adipisicing consequat adipisicing aute laboris do consectetur sit officia elit in tempor aute eiusmod nulla dolore non sint in fugiat adipisicing amet quis in velit sit sunt Duis culpa deserunt Duis sed elit veniam exercitation Ut pariatur magna et id esse dolor dolore aliquip et in cillum commodo commodo et quis veniam magna irure laborum commodo enim tempor dolore velit ut adipisicing consequat dolore enim sunt eiusmod irure aliquip Duis magna laboris non in aliquip magna dolor dolore nulla nisi proident cupidatat laboris eu commodo adipisicing adipisicing ut aliquip eu aute veniam sint magna mollit nostrud ut sed consectetur et tempor consequat nisi nostrud dolore et officia adipisicing labore id enim nisi reprehenderit sunt fugiat ea Ut dolore sed eu in id velit esse et est labore eiusmod culpa adipisicing quis ea consectetur ea fugiat in culpa magna do laboris.</p>
      <p>Lorem ipsum Enim do velit exercitation fugiat cillum labore et dolore ad minim dolor amet tempor nisi sunt Excepteur voluptate laborum et Duis labore cupidatat officia laboris minim cupidatat sit ad incididunt dolor in nulla elit sint do sit aliqua eu ut irure commodo exercitation dolore consequat est laborum Duis in dolore esse est dolore voluptate amet fugiat cupidatat Duis proident consequat nostrud Excepteur ea minim nisi eiusmod sed amet irure id ut officia occaecat nisi elit velit qui aliquip adipisicing consequat adipisicing aute laboris do consectetur sit officia elit in tempor aute eiusmod nulla dolore non sint in fugiat adipisicing amet quis in velit sit sunt Duis culpa deserunt Duis sed elit veniam exercitation Ut pariatur magna et id esse dolor dolore aliquip et in cillum commodo commodo et quis veniam magna irure laborum commodo enim tempor dolore velit ut adipisicing consequat dolore enim sunt eiusmod irure aliquip Duis magna laboris non in aliquip magna dolor dolore nulla nisi proident cupidatat laboris eu commodo adipisicing adipisicing ut aliquip eu aute veniam sint magna mollit nostrud ut sed consectetur et tempor consequat nisi nostrud dolore et officia adipisicing labore id enim nisi reprehenderit sunt fugiat ea Ut dolore sed eu in id velit esse et est labore eiusmod culpa adipisicing quis ea consectetur ea fugiat in culpa magna do laboris.</p>
    </div>
    <footer class="site-footer">
      <p class="copyright">@2017 WEBDESIGNDAY</p>
    </footer>
    <script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="//codepen.io/asuchi0819/pen/aeqjZw.js"></script>
  </body>
</html>

多分これ?

もしかして、質問者さん

<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
//省略
</script>


<head>の中に記述していませんか?
JavaScriptの場合、</body>の直前に記述しないと正しく動作しないものがあります。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/10 13:06

    > hibikikudoさん
    teratail結構な確率で文字化けしますね...

    > k_fujimotoさん
    CodePenを触らない方にはわかりずらいところにjQueryの記述をしてしまいました。CodePenありがとうございます。Forkについてはお気になさらずに...

    > kana0701さん
    動作環境はどのようなものでしょうか
    PCのスペック・ブラウザのバージョン等すべて教えてください。
    また、Chromeでいう開発者ツールにエラーは出てないでしょうか?

    コメントいただきました皆様。ご返信遅くなり申し訳ございませんでした。

    キャンセル

  • 2019/08/10 13:18 編集

    今ちょっとテストしましたが、おそらくの原因を回答に追記しておきます。

    キャンセル

  • 2019/08/16 09:41

    遅くなり申し訳ありません。
    head内に記述していたのが原因でした。
    何度もありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.54%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる