この記事は2015年2月13日に書かれたもので、内容が古い可能性がありますのでご注意ください。
ブラウザがスクロールしてから何かアクションを起こすというコーディングをすることが多々あります。
今回はありがちなスクロールの挙動をご紹介します。
デモはこちらです。
目次
値の取得
//ブラウザのスクロール位置を取得 $(window).scrollTop(); //指定要素のドキュメント上の表示位置を取得 $("hoge").offset().top;
1-1 指定の位置よりメニューを固定表示
デモではナビゲーションがスクロールをしてもTOPに固定表示されるようにしました。
HTML
<nav> <ul> <li>navi1</li> <li>navi2</li> <li>navi3</li> <li>navi4</li> </ul> </nav>
CSS
#wrapper{ padding: 100px 0 0 0; } nav{ width: 100%; border-top: 1px solid #000; border-bottom: 1px solid #000; } nav li{ padding: 14px 30px; float: left; } .navFixed{ position: fixed; top: 0; margin: 0; }
jQuery
$(window).load(function() { var nav = $("nav"); var navTop = nav.offset().top; $(window).scroll(function () { if($(window).scrollTop() > navTop) { nav.addClass("navFixed"); } else { nav.removeClass("navFixed"); } }); });
1-2 スクロールすると右下にボタンを表示
デモではスクロールがされたらページトップボタンが表示されるようにしました。
HTML
<div id="pageBtn"><a href="#top"><i class="fa fa-chevron-up fa-2"></i></a></div>
CSS
#pageBtn{ border: 1px solid #000; border-radius: 10px; clear: both; width: 50px; height: 50px; z-index: 2; position: fixed; bottom: 50px; right: 50px; }
jQuery
$(window).scroll(function(){ var winTop = $(window).scrollTop(); if(winTop > 0){ $("#pageBtn").fadeIn(); }else{ $("#pageBtn").fadeOut(); } });
デモはこちらです。