Question

我正在使用下面的代码尝试设置粘性导航。

它正常工作，但每当它将div更改为fixed时，浏览器会自动滚动到它。这意味着浏览器无法进一步滚动，而不是原始导航栏的位置。

有什么想法吗？

$(document).ready(function() {
    var stickNavOffset = $('#nav').offset().top;

    function sticky() {
        if ($(this).scrollTop() > stickNavOffset-1) {
            $('#nav').css({position:'fixed',left:'auto'});
        } else {
            $('#nav').css({position:'relative',left:'auto'});
        }
    }

    $(window).scroll(function() {
        sticky();
    });
});

Answer 1

如果您的内容恰好是粘性元素设置为position: relative，高度足以垂直滚动，并且从文档流中删除时，内容是正确的高度，则会出现问题不再高到足以强制滚动。

因此，当它切换到固定时，您会快速回到顶部，因为您的文档不够高，无法滚动，这会将粘性元素再次设置为position: relative，从而返回滚动条。 / p>

你可以通过向页面添加更多内容来测试这一点 - 如果它足够高，即使没有粘性元素，它仍会滚动，你就不会遇到这个问题。< / p>

你应该注意到另一个问题，这就是你的内容有点跳跃。实际上，它的跳跃恰好是粘性元素的高度，突然不再存在。

当我说你必须用你的代码来说明这个空间时，这就是我在评论中的意思。在过去，当我创建了粘性元素时，我创建了一个克隆的占位符元素，我将其设置为position: relative，我将其留在原位，以便高度不会跳跃。

jQuery在css上滚动到div更改（粘性导航）

1 个答案: