0

これにより、特定のポイント（divからページの上部までの距離）までスクロールすると、ページ上の位置：absolute（top：46px）がページの上部（top：0px）に固定されるようになります。

$(window).scroll(function (e) {
    $el = $('#sticky');
    if ($(this).scrollTop() > 46 && $el.css('position') != 'fixed') {
        $('#sticky').css({
            'position': 'fixed',
            'top': '0px'
        });
    }
});

ただし、ページの上部に戻ってもdivの位置はリセットされないので、リセットしたいと思います。助言がありますか？また、これがこれを行うための最良の方法であることを確認したいと思います— cssのみの、javascript以外のソリューションがある場合、私はすべての耳です。

4

1 に答える 1

0

スティッキーコンテンツを固定または絶対に保持することをお勧めしますが、2つを切り替えないことをお勧めします。

修正済み：http：//jsfiddle.net/CpM8H/2/

$(window).scroll(function (e) {
    $scrollTopDiff = 46 - $(this).scrollTop();

    $('#sticky').css({
        'top': ( $scrollTopDiff > 0 ? $scrollTopDiff : 0 ) + 'px'
    });
});

絶対： http： //jsfiddle.net/CpM8H/3/

$(window).scroll(function (e) {
    $scrollTop = $(this).scrollTop();

    $('#sticky').css({
        'top': ( $scrollTop > 46 ? $scrollTop : 46 ) + 'px'
    });
});

本当に固定と絶対を切り替える必要がある場合は、これが私の最初の方法ですが、粘着性のあるコンテンツが少し飛び交う可能性があります。

$(window).scroll(function (e) {
$el = $('#sticky');
if ($(this).scrollTop() > 46 ) {
    $el.css({
        'position': 'fixed',
        'top': '0px'
    });
} else {
    $el.css({
        'position': 'absolute',
        'top': '46px'
    });
}
});
于 2012-10-23T17:31:09.097 に答える