Question

当滚动到某个点（从div到顶部的距离）时，这将使页面上的位置：绝对（顶部：46px）固定到页面顶部（顶部：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'
    });
}
});

将div粘贴到屏幕顶部但如果向上滚动，则返回到原始位置？

1 个答案: