
スクロールしていった時にページ上部のナビゲーションが見えなくなったら固定のナビゲーションを表示する
2015年1月13日jQueryのみでつくるギミック
ページをスクロールしていった時に、ページ上部にあるグローバルナビゲーション等のナビゲーションが見えなくなったら、固定位置でついてくるナビゲーションを表示します。
JavaScript
(function($){ $(function() { var fixedNav = $('#fixedNav'); $(fixedNav).hide(); var nv = $('#normalNav'); var nvp = nv.outerHeight() + nv.offset().top; $(function(){ $(window).scroll(function () { var distanceTop = $(document).scrollTop(); if (distanceTop > nvp) { $(fixedNav).show('fast'); } if (distanceTop < nvp) { $(fixedNav).hide('fast'); } }); }); }); })(jQuery);
HTML
<nav id="normalNav"> <ul> <li><a href="#section01">section01</a></li> <li><a href="#section02">section02</a></li> <li><a href="#section03">section03</a></li> <li><a href="#section04">section04</a></li> </ul> </nav> <nav id="fixedNav"> <ul> <li><a href="#section01">section01</a></li> <li><a href="#section02">section02</a></li> <li><a href="#section03">section03</a></li> <li><a href="#section04">section04</a></li> </ul> </nav> <section class="section" id="section01"> <h1 class="title">section01</h1> </section> <section class="section" id="section02"> <h1 class="title">section02</h1> </section> <section class="section" id="section03"> <h1 class="title">section03</h1> </section> <section class="section" id="section04"> <h1 class="title">section04</h1> </section>
CSS
#normalNav { text-align: center; font-size: 18px; font-weight: bold; } #normalNav li { display: inline-block; margin: 0 20px; } #normalNav a { color: #ff5b6b; } #normalNav a:hover { color: #5d5d5d; } #fixedNav { display: none; width: 130px; text-align: center; font-weight: bold; background-color: #ff5b6b; position: fixed; right: 30px; top: 60px; padding: 10px 0; } #fixedNav a { display: block; color: #ffffff; text-decoration: none; padding: 10px; } #fixedNav a:hover { text-decoration: underline; } .section { padding: 20px 25px; border: 1px solid #cccccc; background-color: #ffffff; width: 60%; height: 800px; margin: 50px auto 0px; } .section .title { color: #ff5b6b; }