Blog スタッフブログ

こんにちは、WEB開発のTYです。今回はスマートフォン時のレイアウトで多く見かけるヘッダーのメニューをスクロールしても固定させる方法を紹介したいと思います。

jsファイルにこちらを記載してください。

  $(function(){
    $(window).scroll(function () {
      if ($(this).scrollTop() > 100) {
          $('.header').addClass('menu_fixed');
      } else {
          $('.header').removeClass('menu_fixed');
      }
  });
});

 scrollTop() > 100　はスクロールをした際の数値を判定します。
基本的にはヘッダーの高さを入力してください。

.addClassと.removeClassにはスクロールした際の.headerのクラスに追加したいクラスを入れます。

今回は.menu_fixedをスクロールした際に.headerに付与されます。

そして付与された.menu_fixedに対してCSSを振ります。

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

これでスクロールしたいでもヘッダーの固定化が可能になります。