粘性导航元素在滚动过程中跳转

Aaron M 发表于 Dev

亚伦·M

特别是在Firefox中，我遇到了一个无法解决的问题。

在下一页上，向下滚动时，页面会跳几次-主要是在较小的屏幕上，其中页面未显示其完整尺寸。您可以通过将浏览器缩小为小于页面的大小来复制此问题，因此必须滚动。

在此页上：http : //www.nucanoe.com/zh-CN/frontier-accessories/

如果我position:fixed在导航选择器上禁用，则可以解决此问题-但我们需要使导航保持粘性。有解决此问题的解决方案吗？我在想我们可能需要以某种方式使用jQuery。

提前致谢！

雕刻师

看到您寻求其他答案的帮助后，我会尽力为您解释清楚。

问题

您的问题是，当您添加position:fixed到导航栏中时，它会将其从其位置删除，并将其粘贴在页面顶部。这就是为什么您的其他内容会跳起来的原因-因为导航栏不再是原来的位置。

怎么修

您可以通过将导航元素包装在新的容器中来解决此问题div-我们将其称为nav-wrapper-并将其高度设置为与导航元素相同。这些被称为占位符元素。此新包装程序和原始导航栏必须始终保持相同的高度，以使“跳转”消失。

<div class="nav-wrapper" style="height:80px;"> <-- add this

    <div class="your-original-nav" style="height:80px"></div>

</div> <!-- add this

现在，当您将导航栏设置为，fixed并且它消失在顶部时，我们创建的具有相同高度的新包装器将使页面内容保持不变。除去固定类后，它会再次位于包装器中，而不会压低内容。

一条建议

从您的网站上可以看到，导航栏的位置将有很大的空白，直到新的固定导航到达该点并覆盖它为止。您想要的是一个小jQuery，以找出在哪里固定导航和在哪里隐藏导航。我会解释：

// cache the element
var $navBar = $('.your-original-nav');

// find original navigation bar position
var navPos = $navBar.offset().top;

// on scroll
$(window).scroll(function() {

    // get scroll position from top of the page
    var scrollPos = $(this).scrollTop();

    // check if scroll position is >= the nav position
    if (scrollPos >= navPos) {
        $navBar.addClass('fixed');
    } else {
        $navBar.removeClass('fixed');
    }

});