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

Question

当滚动到某个点(从 div 到页面)

$(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'
    });
});

如果你真的需要在 fixed 和 absolute 之间切换，这是我的第一个关于如何做到这一点的方法，但是粘性内容可能会跳来跳去:

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