jQuery

【コピペ】スクロールで徐々に表示+固定させるスティッキーヘッダー

ヘッダーデザインのよくあるパターンについて、記事にしましたが、模写対象を調べたり、Webデザインの良質見本帳をみていても、ヘッダーだけでも奥深いなあと感じてます。

【ヘッダーデザイン】よくあるパターンのコーディングストックコーディングの効率化を図るためには、たくさんのデザインの経験し、デザインを見ただけでコーディングのイメージが湧くというのが理想です。 ...

 

今回、模写したサイトで、スティッキーヘッダーの実装を経験したので、まとめておきたいと思います。

 

スクロールで表示+固定させるスティッキーヘッダー

今回実装したのは以下のような動きです。

  • デフォルトはヘッダー非表示
  • スクロールすると、ふわっとフェードイン
  • その後は、固定ヘッダーで追従

 

デモはこちらです。

See the Pen
スティッキーヘッダー(非表示→表示)
by kei (@kei_01011)
on CodePen.

 

スティッキーヘッダー実装のソース

 

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header class="fixed-header">

  <div class="inner">
    <div class="header__logo">
      <a href="#">LOGO</a>
    </div><!--header__logo-->
    <nav class="menu__container">
      <ul class="menu">
        <li class="menu-item"><a href="#">Link</a></li>
        <li class="menu-item"><a href="#">Link</a></li>
        <li class="menu-item"><a href="#">Link</a></li>
        <li class="menu-item"><a href="#">Link</a></li>
        <li class="menu-item"><a href="#">Link</a></li>
        <li class="menu-item"><a href="#">Link</a></li>
      </ul>
    </nav>
  </div><!--inner-->
</header>

 

 

CSS

.fixed-header {
  position: fixed;
  opacity:0;
  left: 0;
  height:70px;
  width: 100%;
  background-color: #fff;
  z-index: 1000;
}

header > .inner{
  width: 1080px;
  max-width:100%;
  margin:0 auto;
  display: flex;
  justify-content:space-around;
}
.header__logo a{
  font-size:1.5em;
  line-height:70px;
  text-decoration: none;
  color:#333;
}

.header__logo a:hover{
  opacity:.6;
}
.menu{
  display: flex;
  justify-content: space-between;
  list-style:none;
}
.menu-item a{
  display: block;
  padding:22px;
  text-align: center;
  text-decoration: none;
  color:#333;
}
.menu-item a:hover{
  opacity:.6;
} 

 

 

jQuery

$(function () {

  // falg変数のデフォルト値として「up」を指定    
  var flag = "up";

  // scrollイベントを取得した際の処理を定義
  $(window).on("scroll", function () {
    // scrollTop()が「0」より大きい場合
    if ($(this).scrollTop() > 0) {
    // flag変数が「up」だった場合の処理
      if (flag === "up") {
        // ヘッダーバーに対して、stop()メソッドを実行してから、
        // animate()メソッドを実行
        $(".fixed-header").stop().animate({
          // opacityを「1」になるまでアニメーション
         opacity: 1
        // アニメーション時間を「500ms」に設定
        }, { duration: 500, easing: 'linear' })
        // flag変数の値を「down」に変更
        flag = "down";
      }
    // scrollTop()が「0」の場合
    } else {
      // flag変数が「down」だった場合の処理
      if (flag === "down") {
        // ヘッダーバーに対して、stop()メソッドを実行してから、
        // animate()メソッドを実行
        
        $(".fixed-header").stop().animate({
          // opacityを「1」から「0」になるまでアニメーション
          opacity: 0
        // アニメーション時間を「500ms」に設定
        },{ duration: 500, easing: 'linear' } );
        // flag変数の値を「up」に変更
        flag = "up";
      }

    }

  });

});

 

今回は、こちらの記事を参考に実装しました。

スティッキーヘッダーの作り方を丁寧に分解して書かれていたので、とても参考になります。

 

ポイントとしては、

  • flagという変数を使って、scrollイベントを制御
  • stopメソッドを使って実行中のanimateメソッドを中止してから実行する

 

opacityを徐々にアニメーションさせていくので、フェードインしているように見えます。

        },{ duration: 500, easing: 'linear' } );

この部分を変更すれば、フェードインにかかる時間や、アニメーションの動きを変えることができるので、色々試してみるといいですね。