簡単なのに効果抜群!指定した要素を固定配置するjQueryスニペット

簡単なのに効果抜群!指定した要素を固定配置するjQueryスニペット

設置は簡単!効果は抜群!

よくブログ等を読んでいて、サイドバーなどの要素が固定でコンテンツに合わせて追従してくるページがあるかと思いますが、設置は全く難しくない!jQueryを活用すれば、非常に簡単なんです。

では、サンプルも交えて解説をいたします。

まずは…出来上がりのサンプルからご紹介します。

 

▼サンプル

http://ken10.com/sample/header_fix/

 

サンプルをご覧いただければわかるように、指定した要素がどこまでも追従してくる。

では、その作り方はこちら。。。

まず….

jQueryを読み込む

http://jquery.com/

もうおなじみのライブラリ。jQuery!まずはこいつを読み込んでください。

読みこむ方法は、CDNからでもダウンロードをしてサーバに設置でもどちらでも構いません。

その後…

簡単なスクリプトを書きます

jQueryの読み込みが完了したら、下記スクリプトを記述します。

今回は、「.header_fix」というクラスを固定配置したいので、記述内に.header_fixと記述していますが、この部分は活用される方のご自由に固定したい箇所に適用されたID または class名に適宜変更をしてください。

 

$(function($) {
var tab = $('.header_fix'),
offset = tab.offset();

$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
tab.addClass('fixed');
} else {
tab.removeClass('fixed');
}
});
});

固定配置をする要素のCSSを記述

次に固定配置をする要素のCSSを記述いたします。

このCSSの記述は、.header_fixが画面から見えなくなった時に追加されるclassの「.fixed」に対して行います。

 

.fixed{
	position:fixed;
	top:30px;
}

完了したら動作のチェックを!

ここまで完了したらもう作業は終了です。

早速どのように動作するかチェックをしてみましょう!

 

http://ken10.com/sample/header_fix/

 

いかがでしたか??

この要素を固定配置するスクリプトは、様々な場面で活用、応用ができるものなので、ご提案時などに、是非是非活用してください!

以上!今日の制作は終了!お疲れ様でした。

 

▼気になるHTML5のリファレンスをiPhoneで確認!

HTML5 Reference Guide
カテゴリ: 辞書/辞典/その他
現在の価格: 無料
▼HTML5 / CSS3のお勉強に!

jQueryカテゴリの最新記事