jQueryのコピペでできるSANGOのヘッダーをスクロールで表示・非表示で切り替えるスニペット

2021年2月17日2022年2月23日 3分

よく見かける、上下のスクロールに応じてヘッダーを表示したり・非表示にしたりの仕組みは、jQueryで簡単に実装することができ、このページに実装しているものが、実際にコピペのコードを貼り付けした仕様です。

そこで今回は、jQueryのコピペでできるSANGOのヘッダーをスクロールで表示・非表示で切り替えるスニペットについてご紹介します。

CSSとjQueryコード一式と解説
- CSSの内容
- jQueryの内容

CSSとjQueryコード一式と解説

jquery.cookie.jsには、jQueryの組み込みが必要です。

jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下のMEMOを見てjQueryもHTMLファイルに書き込みましょう。

MEMO

当サイトでは以下のjQueryを使用しています。

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>

上記のような記述が、htmlファイルの

&lt;head&gt;&lt;/head&gt;

の中に無い場合その中へ貼り付けましょう。

コードを表示する

CSS

.header {
  position:fixed;
  z-index: 2;
  width: 100%;
  transition: .3s;
  z-index: 3;
}
@media only screen and (min-width: 769px){
.single #content {
    margin-top: 3.5em;
}
}

jQuery

$(function() {
  var $win = $(window),
      $header = $('.header'),
      headerHeight = $header.outerHeight(),
      startPos = 0;

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > startPos && value > headerHeight ) {
      $header.css('top', '-' + headerHeight + 'px');
    } else {
      $header.css('top', '0');
    }
    startPos = value;
  });
});

CSSの内容

CSS

.header {
  position:fixed;
  z-index: 2;
  width: 100%;
  transition: .3s;
  z-index: 3;
}
@media only screen and (min-width: 769px){
.single #content {
    margin-top: 3.5em;
}
}

WordPressテーマSANGOのheaderには、classでheaderがついているので、position: fixed;の CSSのを記述して、表示・非表示の動きをアニメーションで表現する為に、transitionも指定します。

コピペできるコードのtransitionは、.3s;で指定していますが、この数値を変更することで、好みのスピードにすることができます。

そして、.single #content { margin-top: 3.5em; } を記述して、本文とヘッダーの余白の調整様にCSSを記述しています。

jQueryの内容

jQuery

$(function() {
  var $win = $(window),
      $header = $('.header'),
      headerHeight = $header.outerHeight(),
      startPos = 0;

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > startPos && value > headerHeight ) {
      $header.css('top', '-' + headerHeight + 'px');
    } else {
      $header.css('top', '0');
    }
    startPos = value;
  });
});

jQueryは、上下のスクロール量の条件を設定してCSSのclassを変化させ、startPosの値より大きい場合は下方向へのスクロール、それ以下の場合は上方向へのスクロールで分岐して、表示・非表示の切り替えになります。

そして、CSSで記述したtransitionで、ゆっくりと変化して表示・非表示の切り替えになります。