位置が固定されているナビゲーションを作ってみます。
常に表示されている固定ナビゲーションは、閲覧者の方が好きなタイミングでページの移動が可能です。
CSSのposition:fixedで実装したサンプル
固定をしたい箇所のCSSに position:fixed; を追加します。
#nav{ position:fixed; }
サクッと出来てしまいますが、この場合、固定の場所によってはスクロールすると無駄なスペースが出来てしまいます。サンプルページでスクロールを試してみて下さい。
jQueryを使って実装した場合のスクリプトとサンプル
次に jQuery を使って指定位置になると固定されるように変更して見ます。
jQuery本体は、Google Hosted Libraries の バージョン1.9.1 を使用します。
まずは、css の #nav から position:fixed; の記述を削除します。
続いて、以下のスクリプトを追加します。
jQuery本体は、Google Hosted Libraries の バージョン1.9.1 を使用します。
まずは、css の #nav から position:fixed; の記述を削除します。
続いて、以下のスクリプトを追加します。
$(function($) {
var nav = $('#nav');
var offset = nav.offset().top;
$(window).scroll(function () {
var winTop = $(this).scrollTop();
if(winTop > offset) {
nav.css({position: 'fixed', top: '0'})
} else {
nav.css('position','static');
}
});
});
スクリプト処理内容
以下、スクリプト処理内容です。
//#navを変数 nav に格納
var nav = $('#nav');
//変数 nav のY座標の値を変数 offset に代入
var offset = nav.offset().top;
//スクロールをすると { } の中を実行
$(window).scroll(function () {
//$(this).scrollTop() でスクロール位置の値を取得し winTop に代入
var winTop = $(this).scrollTop();
//winTop が offset の値になったら以下の処理
if(winTop > offset) {
//変数 nav に position：fixed top: 0 を指定
nav.css({position: 'fixed', top: '0'})
} else {
//変数 nav から CSSのクラス fixed を削除
nav.removeClass('fixed');
//変数 nav に position static を指定
nav.css('position','static');
これで思った通りの動きになりました。
今回の実装にあたり、下記のサイト様の記事を参考にさせていただきました。