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

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

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

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;が掛かっています。

CSS3を活用すればjsは発火に使用するだけでもリッチなコンテンツが制作できる?!

MicrosoftIEのサポートが切れてきたので最近CSS3を活用する場面も増えてきています。IE9のサポートが切れれば、もっとCSS3活用できるんですがね〜jsを発火に使ってCSSでアニメを再現すれば比較的負荷も少なくリッチなコンテンツが制作できて、制作者としては楽しいことになりそうですね!