スクロールすると途中から要素が付いてくる
Result
jQuery
var bt = $("#box").offset().top; // boxのページ上からの距離を取得
var ds = 0;
$(document).scroll(function(){ // スクロール発生時の処理の記述を開始
ds = $(this).scrollTop(); // ユーザのスクロールした距離を取得
if (bt <= ds) { // スクロール距離がboxの位置を超えたら、
$("#box").addClass('follow'); // 「follow」というclassを追加する
} else if (bt >= ds) { // スクロールがページ上まで戻ったら、
$("#box").removeClass('follow'); // classを削除
}
});
css
#content {
position: relative;
background: u#333;
height: 3000px;
}
#box {
position: absolute;
top: 250px;
background: #333;
width: 100%;
padding: 30px 0;
text-align: center;
color: white;
}
#content .follow {
position: fixed;/*スクロールで付加されるclass*/
top: 0;
}
html
<div id="content">
<div id="box">fixed</div>
</div>
via
KAYAC DESIGNER’S BLOG