粘性导航元素在滚动过程中跳转 [英] Sticky navigation element jumps during scroll

问题描述

尤其是在Firefox中，我遇到了一个无法解决的问题.

In Firefox especially, I've run into an issue I can't figure out how to fix.

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

On the following page, when scrolling down the page jumps several times - mainly on smaller screens where the page doesn't have its full size displayed. You can replicate this issue by making your browser smaller than the page so you have to scroll.

它在此页上: http://www.nucanoe.com/zh-cn/frontier-accessories/

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

If I disable the position:fixed on the navigation selector, it fixes the issue - but we need the navigation to be sticky. Is there a solution to fix this? I'm thinking we may need to use jQuery somehow.

提前谢谢！

推荐答案

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

After seeing you asking for help on another answer, I will try and explain more clearly for you.

问题

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

Your problem is when you add position:fixed to the navigation bar, it removes it from its place and sticks it at the top of the page. This is why the rest of your content jumps up - because the navigation bar is not where it was anymore.

如何修复

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

You can get around this by wrapping your navigation element in a new div - let's call it nav-wrapper - and set its height to the same as your navigation element. These are known as placeholder elements. This new wrapper and your original navigation bar must always be the same height for the 'jump' to disappear.

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

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

</div> <!-- add this

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

Now, when you set the navigation bar to fixed and it disappears to the top, the new wrapper we created with the same height keeps the page's content the same. When the fixed class has been removed, it sits back in the wrapper again, without pushing the content down.

建议

根据我在您的网站上看到的内容，导航栏将一直存在很大的空白，直到新的固定导航到达该点并覆盖它为止.您想要的是一个小jQuery，以找出在哪里固定导航以及在哪里隐藏导航.我会解释:

From what I can see on your site, there will be a big gap where the navigation bar was until the new fixed navigation reaches that point and covers it. What you want, is a little jQuery to figure out where to make the navigation fixed and where to hide it. I'll explain:

// 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');
    }

});

您可能想在此示例中添加更多功能，因为它非常非常基础.您可能要重新计算窗口调整大小上的偏移量.

You may want to add further functionality to this example, as it is very, very basic. You would probably want to recalculate the offsets on window resize as one addition.

演示

这是一个可能对您有所帮助的小演示-我很无聊，觉得很有帮助:)

This is a little demo which might help you - I was bored and feeling helpful :)

这篇关于粘性导航元素在滚动过程中跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！