一定の位置までスクロールしてからメニューを固定させる

Web制作

一定の位置までスクロールしてからメニューを固定させるのアイキャッチ画像

当サイトのブログのカテゴリーメニューをいい感じの位置までスクロールしてからスティッキーヘッダーのように上からにゅっと出てきてから固定させてみたかったので実装してみました。

addClassとremoveClass

まずはオブジェクトを固定する方法です。一定位置までスクロールしたらaddClassでクラスを付与し、範囲外の時はremoveClassでクラスを外します。

ソース例

jQuery

  <script>
  jQuery(function($){
    var catnavfix = $('.blog-cat-nav'); //固定させるメニュー
    var fix = catnavfix.offset().top; //オブジェクトの距離を取得
    $(window).scroll(function () {
      if($(window).scrollTop() >= fix) {
        catnavfix.addClass('cat-nav-fix');

      } else {
        catnavfix.removeClass('cat-nav-fix');
      }
    });
  });
  </script>

CSS

  .blog-cat-nav{
    position: relative;
  }
  .cat-nav-fix{
    position: fixed;
    top: 0;
  }

固定させるだけならこれでOKです。

スティッキーヘッダーのように一旦スクロールで消えたメニューを上からにゅっと表示させる

先ほどのjsにヘッダーのfixed解除とスクロールの距離にメニューが隠れる高さを追記します。

ソース例

jQuery

<script>
 jQuery(function($){
  var catnavfix = $('.blog-cat-nav'); //固定させるメニュー
  var fixnone = $('.header'); //ヘッダーのフィックス解除
  var fixofset = catnavfix.offset().top; //スクロールの距離取得
  var fix = fixofset + 60; //スクロールの距離+一旦メニューを隠す
  $(window).scroll(function () {
    if($(window).scrollTop() >= fix) { 
      catnavfix.addClass('cat-nav-fix');
      fixnone.addClass('fixnone');
    } else {
      catnavfix.removeClass('cat-nav-fix');
      fixnone.removeClass('fixnone');
    }
  });
});
</script>

アニメーションはCSSで担当

内容がこのサイトのものになってて申し訳ないです。sassをそのまま貼り付けています。

SCSS

.cat-nav-fix{
  position: fixed;
  margin-top:0;
  top: 0;
  z-index: 999;
  background: rgba(255,255,255,0.96)!important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  box-shadow:rgba(0, 0, 0, 0.07) 0px 2px 2px -1px;
  -webkit-box-shadow:rgba(0, 0, 0, 0.07) 0px 2px 2px -1px;
  -moz-box-shadow:rgba(0, 0, 0, 0.07) 0px 2px 2px -1px;
  transition:margin-top .6s;
  padding-top: 8px!important;
  ul.blog-cat-list li{
    margin-bottom: 8px;
    a{
      padding: 7px 20px 6px!important;
    }
  }
}
.catnav-logo{
  display: inline-block!important;
  padding-top: 3px;
  margin-right: 24px;
}

にゅっと出てくるポイントはmargin-top:0;とtransition:margin-top .6s;です。アニメーションは元のオブジェクトにmargin-top:-40px;が掛かっています。