
スクロールしていった途中からナビゲーションなどの位置を固定する
2014年10月29日jQueryのみでつくるギミック
以前「Sticky-Kit」という今回紹介するギミックと同じようなが出来るjQueryプラグインを紹介しましたが、今回紹介するのはjQueryとCSSで行う方法です。
こちらの方法の場合はレスポンシブWebデザインを行う際、画面が狭くなってナビゲーションを固定をすることで画面領域を圧迫したくない時も、CSS側で簡単にfixedをstaticに切り替えたりすることが可能です。
JavaScript
(function($){ $(function() { var nav = $('#nav'), offset = nav.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top - 20) { nav.addClass('fixed'); } else { nav.removeClass('fixed'); } }); }); })(jQuery);
HTML
<div id="container"> <div id="contents"> <div class="section">section</div> <div class="section">section</div> <div class="section">section</div> </div> <div id="side"> <div id="nav">nav</div> </div> </div>
CSS
#container { width: 1000px; margin: 0 auto; overflow: hidden; } #contents { width: 740px; float: left; } #contents .section { height: 1000px; margin-top: 20px; padding: 10px; background-color: #ffffff; } #side { margin: 20px 20px 0 0; float: right; } #nav { width: 200px; height: 200px; color: #ffffff; background-color: #ff5b6b; padding: 10px; } .fixed { position: fixed; top: 20px; } @media screen and (max-width: 480px) { .fixed { position: static; } }