jQueryで要素がページの一番上まできたら位置を固定する

jQueryで要素がページの一番上まできたら位置を固定するサンプル 最近のサイトでよく見るのが、スクロールしていくと途中で要素が固定されるやつ。
印象的で、かつ残したい要素が訴求できる手段です。
jQueryを使うと簡単に実現でき、また複数の要素を代わる代わる固定させられます。
via:Persistent Headers | CSS-Tricks

使用方法 jQueryからjquery.jsをダウンロード。
それを読み込んで下記のように記述していきます。
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function UpdateTableHeaders() {
$(".class名1").each(function() {
var el = $(this),
offset = el.offset(),
scrollTop = $(window).scrollTop(),
floatingHeader = $(".floatingHeader", this)

if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
floatingHeader.css({
"visibility": "visible"
});
} else {
floatingHeader.css({
"visibility": "hidden"
});
};
});
}

$(function() {
var clonedHeaderRow;
$(".class名1").each(function() {
clonedHeaderRow = $(".class名2", this);
clonedHeaderRow
.before(clonedHeaderRow.clone())
.css("width", clonedHeaderRow.width())
.addClass("floatingHeader");
});

$(window)
.scroll(UpdateTableHeaders)
.trigger("scroll");
});
</script>

次にCSSを書きます。
.floatingHeader {
position: fixed;
top: 0;
visibility: hidden;
}

あとは固定させたい領域と要素を記述すれば完成です。
<div class="class名1">
<h1 class="class名2">skuare.net</h1>
</div>
<div class="class名1">
<h2 class="class名2">skuare.net</h2>
</div>

jQueryで要素がページの一番上まできたら位置を固定するサンプル

sponsors

「jQueryで要素がページの一番上まできたら位置を固定する」をシェアする

記事作成:
記事URL:

TOP > > > jQueryで要素がページの一番上まできたら位置を固定する