javascript - 使 div 贴在屏幕顶部，但如果向上滚动，返回到原来的位置？

Question

当滚动到某个点（从 div 到页面顶部的距离）时，这将使页面上的 position: absolute ( top: 46px ) 的 div 固定到页面顶部 ( 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 解决方案，我会全力以赴。

Answer 1

我建议将粘性内容保持固定或绝对，但不要在两者之间切换。

固定：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'
    });
}
});