スクロールダウンしたときにヌルッとでてくるヘッダーの作り方

はじめに

Web制作をしていくなかで、スクロールダウンをしたときにヘッダーとは異なるヘッダーを常時だしておきたいときに、こちらの方法で実装しました。

備忘録として、メモを残しておきます。

コードの書きかた

class名はjsが適用されるときはプリフィックスとして、jsを付けています。

index.html

<div id="js-header">
 <div class="js-header__menu">
  <ul class="js-header__list">
          <li><a href="#">メニューA</a></li>
          <li><a href="#">メニューB</a></li>
          <li><a href="#">メニューC</a></li>
          <li><a href="#">メニューD</a></li>
          <li><a href="#">メニューE</a></li>
        </ul>
      </div>
  </div>

style.css

# js-header {
  line-height: 66px;
  top: -66px; /* 上に隠す高さ */
  left: 0;
  width: 100%;
  margin: 0 auto;
  overflow: scroll;
  position: fixed;
  opacity: 0;
  z-index: 1000;
}

script.js

  jQuery(function () {
    "use strict";
    var flag = "view";

    $(window).on("scroll", function () {      
      if ($(this).scrollTop() > 200) {
        if (flag === "view") {
          $("#js-header").stop().css({opacity: '1.0'}).animate({
            top: 0
          }, 500);
          flag = "hide";
        }

      } else {
        if (flag === "hide") {
          $("#js-header").stop().animate({top:"-66px",opacity: 0}, 500);
          flag = "view";
        }
      }
    });
  });

どっかからひろってきたコードです。
理解はできていないくても普通に使えたんですが、せっかくなので1行ずつみていきますか。

  jQuery(function () {
    "use strict";
    var flag = "view";

falg変数のデフォルト値として「view」を指定しています。変数flagを使わないと、ページをスクロールしていると常に同じ処理が繰り返されてしまうようです。

    $(window).on("scroll", function () {      
      if ($(this).scrollTop() > 200) {
        if (flag === "view") {
          $("#js-header").stop().css({opacity: '1.0'}).animate({
            top: 0
          }, 500);
         // flag変数の値を「hide」に変更
          flag = "hide";
        }

scrollが２００に到達したら#js-headerにopacity:1.0を与える指示をしています。
もともとのCSSには、opacity:0;を指定しておいて、スクロールしたときにopacity:1.0にすることで表示させているんですね。
ちなみにこの200の数字の単位は、pxなはず。

top:0というのはcssでtop:-66pxで上に隠していたのを下におろして表示させるための指示です。
書いていて思いましたが、opacityでも非表示にして、高さでも隠してなぜダブルでやっているんだろうか、、。

また、500(0.5秒)という数字を変えると表示される速度が変わります。好みに合わせてください。

      } else {
        if (flag === "hide") {
          $("#js-header").stop().animate({top:"-66px",opacity: 0}, 500);
          flag = "view";
        }
      }

今はhideのフラッグがたっています。
こちらでは、スクロールアップしていったときに通常のヘッダーの表示に切り替える指示をだしています。
※ヌルッとでてきたヘッダーを隠す指示

同様に、top:-66pxとopacity:0を500(0.5秒)で行っています。
そして、flagをviewに戻しています。

まとめ

今までコピペで対応してきたんですが、応用力を高めるためにコピペ内容を自分なりにまとめてみました。
非常に勉強になったので今後も続けていきます。

たぶん。

■参考にした記事
マークダウンの書き方
https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1

ヘッダーの作成方法
https://naughties.net/2018/02/05/scroll-fixed-header/
https://mae.chab.in/archives/2699