スクロールしたらヘッダを固定、ナビをちょっと変化させてみる。

2019.01.19

#デザインメモ

スクロールしたらメニューを固定、の動きをつけてみました。

こんな感じに動いてます。最上部に固定されたときにちょっとだけ変化します。

cssのアニメーションで動きを実装して、それをjQueryでつけたり外したり、addClassとremoveClassだけでもいろんなことができるかも。

html

headerとmain。headerの中にnav、メニューがあります。

<!-- ヘッダ部分 -->
<header>
  <nav>
    <ul>
      <li>メニュー1</li>
      <li>メニュー2</li>
      <li>メニュー3</li>
    </ul>
  </nav>
</header>

<!-- コンテンツ部分 -->
<main>
  <p>コンテンツ</p>
</main>

ヘッダを固定するcssを用意

画面をスクロール、ポイントに来たらcssのposition: fixedで固定表示させたい。

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

js（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');
    }
  });
});

スクロールしてnavの位置に来たときに、navに.is-fixedを付与。elseはスクロールしたけれどnavまで到達していなかったとき、margin-topをリセットして初期表示と同じ状態に。

参考にさせていただいた記事はこちら。ありがとうございました。

jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5

固定したついでにナビが透過、高さが変化するcss

header  {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  transition: .3s;
  background-color: rgba(255,255,255,0);
  height: 200px;
}

.is-fixed  {
  position:  fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  background-color: rgba(255,255,255,0.9);
  -webkit-transition: all .4s ease 0s,background .6s ease .2s;
  transition: all .4s ease 0s,background .6s ease .2s;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  height: 100px;
}

backgroundを透過、高さを200pxから100pxに変えています。カクカクせずヌルッと動くよう、アニメーションを加えます。

今更メニューをカスタマイズしてみました。
途中ごはんを食べたり小休止していたために、しばらくの間スマホメニューが崩壊していたようです。
ごめんなさい。