在滚动期间粘滞导航元素跳跃

Question

特别是在Firefox中,我遇到了一个我无法弄清楚如何修复的问题.

在下一页上,向下滚动页面时会跳转几次 - 主要是在较小的屏幕上,页面没有显示其完整大小.您可以通过使浏览器小于页面来复制此问题,因此您必须滚动.

它在这个页面上:http://www.nucanoe.com/frontier-accessories/

如果我position:fixed在导航选择器上禁用它,它会解决问题 - 但我们需要导航是粘性的.有解决方案来解决这个问题吗？我想我们可能需要以某种方式使用jQuery.

提前致谢!

Answer 1

看到你在另一个答案上寻求帮助后,我会尝试为你更清楚地解释.

问题

您的问题是当您添加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');
    }

});

您可能希望为此示例添加更多功能,因为它非常非常基本.您可能希望重新计算窗口调整大小的偏移量作为一个添加.

一个演示

这是一个可能对你有所帮助的小演示 - 我很无聊,感觉很有帮助:)