滚动期间粘性导航元素跳转 [英] Sticky navigation element jumps during scroll

问题描述

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

在接下来的页面上，向下滚动时页面会跳转几次 - 主要是在页面未显示完整尺寸的较小屏幕上.您可以通过使浏览器小于页面来重现此问题，以便您必须滚动.

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

如果我禁用导航选择器上的 position:fixed，它会解决问题 - 但我们需要导航保持粘性.有没有办法解决这个问题?我想我们可能需要以某种方式使用 jQuery.

提前致谢！

解决方案

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

问题

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

如何修复

您可以通过将您的导航元素包装在一个新的 div 中来解决这个问题——我们称之为 nav-wrapper——并将其高度设置为与您的导航元素相同.这些被称为占位符元素.这个新的包装器和你原来的导航栏必须始终处于相同的高度，跳转"才会消失.

<-- 添加这个<div class="your-original-nav" style="height:80px"></div>
<!-- 添加这个

现在，当您将导航栏设置为 fixed 并且它消失到顶部时，我们创建的具有相同高度的新包装器使页面的内容保持不变.当固定的类被移除后，它会再次回到包装器中，而不会将内容向下推.

建议

从我在您网站上看到的情况来看，在新的固定导航到达并覆盖它之前，导航栏所在的位置会有很大的差距.你想要的是一个小的 jQuery 来确定在哪里修复导航以及在哪里隐藏它.我来解释一下:

//缓存元素var $navBar = $('.your-original-nav');//找到原始导航栏位置var navPos = $navBar.offset().top;//滚动时$(窗口).滚动(功能(){//从页面顶部获取滚动位置var scrollPos = $(this).scrollTop();//检查滚动位置是否 >= 导航位置如果 (scrollPos >= navPos) {$navBar.addClass('固定');} 别的 {$navBar.removeClass('fixed');}});

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

演示

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

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.

It's on this page: http://www.nucanoe.com/frontier-accessories/

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.

Thanks in advance!

解决方案

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

The Problem

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.

How To Fix

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

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.

A Suggestion

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.

A Demo

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

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