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

WordPress

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

 

 

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

まずは、ヘッダーのHTMLCSS書く。

 

<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です。

 

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

 

【まとめ】

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

 

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

 

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

 

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