【 WEBデザイン 】スクロールでヘッダーを固定する

WordPress

スクロール値に応じて、ヘッダーがぬるっと現れて固定される動きを実装します。

 

 

【ヘッダーを固定する】   position:fixed;

まずは、ヘッダーのHTMLをCSS書く。

 

<header class="header">

 　<nav class="header-nav">
   　<ul>
   　  <li><a href="#">Home</a></li>
   　  <li><a href="#">About</a></li>
   　  <li><a href="#">Works</a></li>
  　   <li><a href="#">Contact</a></li>
  　   <li><a href="#">Blog</a></li>
 　  </ul>
　 </nav>
</header>
   header.header{
     padding-top: 1%;
     transition: .5s;

      
 /*ナビ部分のCSS*/
     nav.header-nav{
       width: 100%;
     
       ul{
         display: flex;
         justify-content: flex-end;
         padding-right: 2%;

         li{
           margin-left: 30px;

           a{
             text-decoration: none;
             position: relative;
             display: inline-block;

             /*ナビ部分の文字にマウスを置いたらアンダーラインが入るアニメ*/
             &::after{
               position: absolute;
               bottom: -4px;
               left: 0;
               content: '';
               width: 100%;
               height: 2px;
               background: $conceptColor;
               transform: scale(0, 1);
               transform-origin: right top;
               transition: transform .3s;

             }

             &:hover::after{
               transform-origin: left top;
               transform: scale(1, 1);
             }
           }
         }
       }
     }
   }

ここまでのコードは、ページにきた時に一番上にある状態のヘッダーのコードです。

 

今回は、これをスクロールさせたときに、一旦は上に隠れて、

一定の位置までスクロールすると、上から再度ぬるっと出てくるように実装します。

 

【スクロールしたらクラスを付与する】

今回は、jQuery　を使います。

 

<head> </head>内に CDN を書きます。

<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>

次は、jQueryのコードです！　

</body> の上あたりに<script> </script>で囲んで書きます。

<script>
//ヘッダー固定・解除
//window（画面）の、scrollTop（スクロール量が一番上から数えて、10より大きくなったら)
//headerという名のクラスのcssをtop: -80px に変更する　(上にずらしてる)

$(window).scroll(function(){
 if ($(window).scrollTop() > 10) {
   $('.header').css({"top":"-80px"}); 
 } 
 
 //window（画面）の、scrollTop（スクロール量が一番上から数えて、750より大きくなったら)
 //headerという名のクラスに、addClass(クラスを加える)、'fixed 'という名の
 //headerという名のクラスのcssをtop: 0px に変更する
 if ($(window).scrollTop() > 750) {
   $('.header').addClass('fixed');
   $('.header').css({"top":"0px"}); 
 } 
 
//window（画面）の、scrollTop（スクロール量が一番上から数えて、10より小さくなったら)
 //headerという名のクラスに、removeClass(クラスを外す)、'fixed 'という名の
 if ($(window).scrollTop() < 10) {
   $('.header').removeClass('fixed');
 }
})

</script>


↑コメントの通りの、じっくり見れば、簡単なことを指示しています。


 


つまり、一定のところまで、スクロールされたら、クラスを付与しろという命令文ですね。


 


何か動きをつけたい時の考え方は、このパターンが多いです。


普通の状態と、


変化後の状態を、


区別するためには、変化後には、○○っていうクラスがあるようにして、


クラスがある場合は、こうする。無い場合は、こうする。


ていう風に、イメージして、コードを組みましょう。


 


【変化後のCSSを書く】


一定までスクロールした時に「header」というクラスを持つ要素に「fixed」というクラスを付けとけよ！と命令したので、


スクロールした時には、HTMLのコードはこう書き変わります






<header class="header fixed">    <!-- クラス　fixedが追加される　-->
 
 <nav class="header-nav">
   <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Works</a></li>
     <li><a href="#">Contact</a></li>
     <li><a href="#">Blog</a></li>
   </ul>
 </nav>

</header>




CSSも、fixedというクラスがついた状態のCSSを書きます






header.header.fixed{
     display: flex;
     align-items: flex-end;
     width: 100%;
     padding:.5% 5%;        /*余白調整--------------*/
     position: fixed;　        /*固定する--------------*/
     z-index: 1000;            /*重なり順を最上層にする--------------*/
     transition: .4s;            /*変化にかかる時間--------------*/
     border-bottom: $conceptColor solid 2px;　/*枠の下線を入れる------------*/
     background-color: rgba($color: #ffffff, $alpha: .7);　/*背景色---*/
   }




fixedというクラスがついた場合の、SCSSです。


 


このようにクラスの有無によって、スタイルを変更することで、条件に応じた変化を加えることができます。


 


【まとめ】


１、通常のヘッダーのHTML、CSSを書く


 


２、jQueryで、スクロールしたときに、ヘッダーにクラスを付与するコードを書く


 


３、クラスを付与されたヘッダーのCSSを書く


 


付与するクラス名は自由ですので、わかりやすいものにしましょう！







      





        

          一覧へ戻る >