Question

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

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

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

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

提前致谢！

Answer 1

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

问题

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

如何修复

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

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

});

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

演示

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

Answer 2

当导航从相对位置移动到固定位置时，您需要占位符。因此，你需要制作一个新的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 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.

这是一个小提琴：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的高度时，该解决方案对我有用。

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

4 个答案: