スクロールすると途中から要素が付いてくる

Ads

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

タイトルとURLをコピーしました