jQueryでスクロールイベントでページの指定した場所に移動したり、一定までスクロールした時に、
ナビゲーションを表示させるといったことも可能です。
スクロール位置を取得するためには scrollTop() メソッドを使います。
ウィンドウ全体でスクロール量を習得したい場合$(window)を使います。
1 |
$(window).scrollTop(); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script> $(window).scroll(function() { var Scr = $(document).scrollTop(); $('#ScrValue').val(ScrTop); if(Scr > 300){ $('.menu').css('position','fixed') } }); </script> <input type="text" size="10" value="0" id="ScrValue" /> <ul class="menu"> <li><a href="#">メニュー</a><li> <li><a href="#">メニュー</a><li> <li><a href="#">メニュー</a><li> </ul> |
上記では、スクロール量が200を超えると固定されるメニューを作成することができます。
他にもページトップボタンやスクロールした時にグローバルナビを上部に固定したりいろいろなことができます。
コメント