スクロールしてもグローバルナビを上部で固定する(レスポンシブ)

Filed under: css,JavaScript,レスポンシブデザイン — kdcs @ 18年2月9日 金曜日

スクロールしてもグローバルナビを上部で固定する(jQuery使用)
pcで表示の場合のみ固定し、モバイル表示の時はslicknavを表示する

ページhtml
※ナビ固定分の縦幅の起点のため空のdivタグ#navFixedを入れる
モバイル表示の際は、このdivタグは非表示処理(display: none;)する

<div id="nav">
ナビ記述・・・
</div><!--/#nav-->

<div id="navFixed"></div>
<div id="main">
メインコンテンツ・・・
</div><!--/#main-->

css

#nav { text-align: center; background: #2f62c5; }
.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}

/* スマホ対応
---------------------------------------------*/
@media only screen and (max-width: 780px) {
#nav {
  display: none;
  }
div#navFixed { display: none; }
}

javascript

//ナビ スクロール固定 --------------------------------------
$(function() {
  var $win = $(window),
      $main = $('#navFixed'),
      $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');
    }
  });
});

サイト内検索

カテゴリー

最近の投稿

« |スクロールしてもグローバルナビを上部で固定する(レスポンシブ)| »
↑上に戻る