今回は、固定したいエリアがページ上部に初めからある場合ではなく途中にあり、スクロース後ページ上部に到達した段階で固定される実装方法をまとめました。
上にメインビジュアルのあるメニューや、サブメニューをページ上部で固定したい場合などに使用することが多いと思います。
デモサイトはこちら
スクロールすると、メニューがページ上部に達した時に固定されていますね!
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参考書はこちら!
posted with ヨメレバ
西畑一馬 アスキー・メディアワークス 2013年03月