【アウトプット㊳】-jQuery- スティッキーヘッダーの実装

スティッキーヘッダーとは。。。

ヘッダやナビゲーション、サイドバーなど指定した要素をスクロールした際にぴたっと指定した位置に張り付けることができる。

下のコードでは画面のスクロール位置がfvを超えたらヘッダーが上部に固定される

HTML
<header class="header">
   <div class="header-inner">
     <nav class="header-nav">
       <ul class="nav-list">
         <li class="nav-item"><a href="#!">Concept</a></li>
         <li class="nav-item"><a href="#!">Service</a></li>
         <li class="nav-item"><a href="#!">Works</a></li>
         <li class="nav-item"><a href="./contact/">Contact</a></li>
       </ul>
     </nav>
   </div>
 </header>

 <main>
     <div class="fv">
       <img src="./img/fv-bgi_01@2x.jpg" alt="">
     </div>  
 </main>  

CSS
.header.fixedClass {
 position: fixed;
 background-color: #282f35;
 padding: 30px;
 width: 100%;
 transition: .3s;
}

headerにfixedClassというクラスがついたら背景色が変わって上部に固定できる（jQueryでこの動作をする）

jQuery
$(function() {
   //変数宣言 
   var $win = $(window),　//ページ全体が読み込まれてから実行する
       $fv = $('.fv'),　
       $header = $('.header')
       fvHeight = $fv.outerHeight(),　//要素の高さを求める
       fixedClass = 'fixed';　
 
 $win.on('load scroll',function(){　//ウィンドウが読み込まれた後、スクロールイベントが発生した時に実行する
   var value = $(this).scrollTop();　//ウィンドウがどれだけ縦方向にスクロールされたか調べvalueに代入する
     
     if($win.width()>768)　//もしウィンドウが768px以上だったら
 
       if ( value > fvHeight) {　//もしスクロールされた高さが画像の高さ以上だったら
         $header.addClass(fixedClass);　//ヘッダーにfixedClassクラスを付与する
         
       } else {
         $header.removeClass(fixedClass);　//ヘッダーからfixedClassクラスを削除する
         
       }
   });
 });