jQuery 在 css 更改时滚动到 div(粘性导航)

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，从而恢复滚动条。

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

不过，您应该注意到另一个问题，那就是您的内容跳动了一点。实际上，它恰好跳到了粘性元素的高度，而粘性元素突然不在了。

这就是我在评论中所说的您必须在代码中考虑该空间时的意思。过去，当我创建粘性元素时，我创建了一个克隆的占位符元素，我将其设置为 position: relative 并保留在原位，这样高度就不会跳跃。