2014.02.09 2022.07.20

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

ken10

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

よくブログ等を読んでいて、サイドバーなどの要素が固定でコンテンツに合わせて追従してくるページがあるかと思いますが、設置は全く難しくない！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のお勉強に！

HTML5+CSS3の新しい教科書基礎から覚える、深く理解できる。

給料が不満！会社に正しく評価されていないというエンジニアへ…

近年エンジニアの存在が以前に増して重要視されるようになり、IT土方と呼ばれていたエンジニアが低評価な時代ではなくなってきましたが、なかにはまだまだ正しく評価を受けることができていないエンジニアもいます。

そんなエンジニアの方はフリーランスエンジニアという新しい選択肢を検討してみてはいかがでしょうか。

フリーランスITエンジニアの案件・求人情報サイト【ギークスジョブ】

また、今はエンジニアではないけどエンジニアになりたい！という方は「プログラミングスクール」で学んでから転職を検討してみてはいかがでしょうか。

転職を本気で考えている方向けのプログラミングスクール！【DMM WEBCAMP】

#html5 #javascript #jquery #WEBサービス

ABOUT ME