粘性导航元素在滚动期间跳转

Question

尤其是在 Firefox 中，我运行遇到了一个我不知道如何解决的问题。

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

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

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

提前致谢！

Answer 1

当您的导航从相对变为固定时，您需要有一个占位符。因此，您需要制作一个新的 div.

jQuery(".nav").wrap('<div class="nav-placeholder"></div>');
    jQuery(".nav-placeholder").height(jQuery(".nav").outerHeight());


    jQuery(".nav").wrapInner('<div class="nav-inner"></div>');

记得根据您的需要更改“.nav”、"nav-inner" 和 "nav-placeholder"。

要获得功能齐全的粘性导航，请查看我的网站：http://www.swegre.se/

Answer 2

看到你在另一个答案上寻求帮助，我会尽力为你解释得更清楚。

问题

您的问题是，当您将 position:fixed 添加到导航栏时，它会将其从原来的位置移除并固定在页面顶部。这就是为什么您的其余内容会跳起来的原因 - 因为导航栏已经不在原来的位置了。

如何修复

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

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

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

</div> <!-- add this

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

一个建议

据我在您的网站上看到的情况，在新的固定导航到达并覆盖该点之前，导航栏所在的位置会有很大的差距。您想要的是一点 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');
    }

});

您可能希望向该示例添加更多功能，因为它非常非常基础。您可能希望重新计算 window 调整大小时的偏移量作为一个加法。

一个演示

This is a little demo which might help you - 我很无聊但感觉很有帮助 :)

Answer 3

现在这样做：在导航前添加一个元素：

<div class="nav-placeholder"></div>

和 jquery:

<script type="text/javascript">
    $(document).on("scroll",function(){
        if($(document).scrollTop()>150){
            $(".nav-placeholder").height($(".nav").outerHeight());
        } else {
            $(".nav-placeholder").height(0);
        }
    });
</script>

当我向下滚动到 150 时，占位符获得导航的高度，当我再次向上滚动时，我将其高度设置为 0。

这是一个fiddle：https://jsfiddle.net/herrfischerhamburg/562wu62y/

Answer 4

我以不同的方式解决了这个问题，所以在 firefox 上，正如您在日志中看到的那样，它会自行向上滚动，以便停止滚动，我做了简单的声明

$(document).ready(function () {
        var header = $('#left-menu');
        var offset = header.offset().top;
        var up = true;
        $(window).scroll(function () {
            var scroll = $(window).scrollTop();
            console.log(scroll + ' ' + offset )
            if (scroll >= offset) {
                header.addClass('sidebar-sticky');
                if (up){
                    $(window).scrollTop(offset);
                    up=false;

                }


            } else {
                up=true;
                header.removeClass('sidebar-sticky');
            }
        });


    });

当我无法指定我使用的 div 的高度时，该解决方案对我有用。

粘性导航元素在滚动期间跳转

Sticky navigation element jumps during scroll

css

scroll

sticky