コンテンツ量の多い画面では、画面上部のメニューに戻るのに「画面上部に戻るボタン」を実装していることが多いですが、画面の高さが狭くなることさえ了承できれば、メニューを画面上部に固定していてもいいかもしれません。
ただし、最初からメニューを画面上部に固定しているとサイトのデザインが限定されてしまいます。
画面をスクロールし、メニューバーが画面上部に到達した時点でメニューを固定し、画面上部に戻ると固定が外れるようにするには、下記のjQueryを利用して下さい。
今回は、id="menu"というdiv要素をfixedというクラスを使って固定します。
画面をスクロールした時にmenuというIDのdiv要素が画面上部に到達したタイミングでfixedというクラスをつけます。
headタグ内に下記スクリプトとソースを挿入してください。
jqueryサンプル
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script> jQuery(function($) { var target = $('#menu'), offset = target.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { target.addClass('fixed'); } else { target.removeClass('fixed'); } }); });</script> |
CSSサンプル
1 2 3 | <style type="text/css"> .fixed{position: fixed; top: 0;}</style> |
