ページ上部で固定されるメニュー │ ここつぶ

今回は、固定したいエリアがページ上部に初めからある場合ではなく途中にあり、スクロース後ページ上部に到達した段階で固定される実装方法をまとめました。

上にメインビジュアルのあるメニューや、サブメニューをページ上部で固定したい場合などに使用することが多いと思います。

デモサイトはこちら
スクロールすると、メニューがページ上部に達した時に固定されていますね！

1. HTML
2. CSS
3. jQuery

HTML

固定させる囲みdivにclass=”js-menu”をつけます。

<div class="wrapper">
    <div class="menu-box js-menu">
        <ul class="menu_list">
            <li class="menu_item"><a href="#">menu</a></li>
            <li class="menu_item"><a href="#">menu</a></li>
            <li class="menu_item"><a href="#">menu</a></li>
            <li class="menu_item"><a href="#">menu</a></li>
        </ul>
    </div>
    <div class="contents">
        <div class="box">
            <img src="https://cocotsubu.com/demo/demo01/images/01.jpg" alt="">
        </div>
        <div class="box">
            <img src="https://cocotsubu.com/demo/demo01/images/02.jpg" alt="">
        </div>
        <div class="box">
            <img src="https://cocotsubu.com/demo/demo01/images/03.jpg" alt="">
        </div>
    </div>
</div>

CSS

スクロールしてページ上部にきた時にclass=”menu-box”にis-fixedをjsでつけます。
その際にcss側でposition: fixedを指定してページ上部に固定させます。

.wrapper{
  display: block;
  margin: 0 auto;
  padding-top:  80px;
  width: 100%;
}
.menu-box{
  width: 100%;
}
.menu-box.is-fixed{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: #fff;
}
.menu_list{
  margin:0 10px;
  display: flex;
  justify-content: center;
}
.menu_item{
  width: calc(100% / 3);
  list-style: none;
  text-align: center;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
}
.menu_item:first-of-type{
  border-left: 1px solid #ccc;
}
.menu_item a{
  display: inline-block;
  width: 100%;
  padding: 10px 0;
  text-decoration: none;
  font-size: 13px;
  color: #333;
}
.menu_item i{
  margin-left: 8px;
  color: #ccc;
}
.contents{
  margin:0 10px;
}
.box img{
  width: 100%;
  vertical-align: bottom;
}

jQuery

js-menuがページ上部にきたら、js-menu（メニューの高さ）分bodyにpadding-topで空きをとります。
その際にjs-menuにclass=”is-fixed”をつけてメニューを固定させます。

$(function(){
    // 固定メニュー
    var navPos = $( '.js-menu' ).offset().top; // メニューの位置
    var navHeight = $( '.js-menu' ).outerHeight(); // メニューの高さ
    $( window ).on( 'scroll', function() {
      if ( $( this ).scrollTop() > navPos ) {
        $( 'body' ).css( 'padding-top', navHeight );
        $( '.js-menu' ).addClass( 'is-fixed' );
      } else {
        $( 'body' ).css( 'padding-top', 0 );
        $( '.js-menu' ).removeClass( 'is-fixed' );
      }
    });
});

おすすめのjQuery参考書はこちら！