Now Loading...
menu
  • すべて
  • web制作
  • 写真を楽しむ
  • カメラで遊ぶ
  • モノ
  • 旅
  • おすすめツール

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

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

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

こんな感じに動いてます。

最上部に固定されたときにちょっとだけ変化します。

 

 

 

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に変えています。

カクカクせずヌルッと動くよう、アニメーションを加えます。

 

 

今更メニューをカスタマイズしてみました。

途中ごはんを食べたり小休止していたために、しばらくの間スマホメニューが崩壊していたようです。

ごめんなさい。

 

share on

TIPS&NOTE TOPへ