スクロールに応じてヘッダーやナビゲーションを固定または変化させるjQuery

2019.04.24

ページをスクロールさせたときにヘッダーやナビゲーションを固定または変化させるjQueryのサンプルです。

縦に長いページ等でよく見かけますが、実装自体は簡単に出来ます。特にナビゲーションは常に表示させておくことで、ユーザビリティの向上にもつながりますし、離脱率の低下も期待出来るのではないでしょうか。既存のサイトやページにも導入しやすいので、一度試してみる価値はあると思います。

基本のHTML

ここで紹介するサンプルのHTMLは下記のようになります。

<header id="header">
header
</header>

<nav id="nav">
nav
</nav>

<main id="main">
contents
</main>

<footer id="footer">
footer
</footer>

（1）途中でナビゲーションを固定する

あるポイントまでスクロールすると、cssのposition:fixed;をつかってナビゲーションを固定させるパターンです。

CSS

.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}

jQuery

$(function() {
  var $win = $(window),
      $main = $('main'),
      $nav = $('nav'),
      navHeight = $nav.outerHeight(),
      navPos = $nav.offset().top,
      fixedClass = 'is-fixed';

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > navPos ) {
      $nav.addClass(fixedClass);
      $main.css('margin-top', navHeight);
    } else {
      $nav.removeClass(fixedClass);
      $main.css('margin-top', '0');
    }
  });
});

デモ

See the Pen
yrRNWM by keitasakurai (@mdesignyokohama)
on CodePen.

（2）下にスクロールでヘッダーが隠れて、上にスクロールで表示

下にスクロールするとヘッダーが非表示になり、上にスクロールすると再びヘッダーが表示されるパターンです。

CSS

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  transition: .3s;
}

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;
  });
});

デモ

See the Pen
qwJOGW by keitasakurai (@mdesignyokohama)
on CodePen.

（3）スクロールするとヘッダーの高さが変化

スクロールしたときにヘッダーの高さが縮むパターンです。スクロールしたタイミングでヘッダーにis-animationというclassを付与して高さを制御します。

CSS

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 200px;
  background: #3498db;
  transition: .3s;
}
.is-animation {
  height: 100px;
}

jQuery

$(function() {
  var $win = $(window),
      $header = $('header'),
      animationClass = 'is-animation';

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > 100 ) {
      $header.addClass(animationClass);
    } else {
      $header.removeClass(animationClass);
    }
  });
});

デモ

See the Pen
YMJwzq by keitasakurai (@mdesignyokohama)
on CodePen.

（4）ページの途中でナビゲーションが表示される

スクロールすることで一度表示領域から消えたナビゲーションを、ページの途中から再度表示させるパターン。

CSS

.clone-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  transition: .3s;
  transform: translateY(-100%);
}
.is-show {
  transform: translateY(0);
}

jQuery

$(function() {
  var $win = $(window),
      $cloneNav = $('nav').clone().addClass('clone-nav').appendTo('body'),
      showClass = 'is-show';

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > 700 ) {
      $cloneNav.addClass(showClass);
    } else {
      $cloneNav.removeClass(showClass);
    }
  });
});