Question

我使用一些简单的JS创建了一个粘性导航。它似乎适用于大多数页面，但在较短的页面上，它会混淆并开始闪烁，无法下定决心。想知道如何解决这个问题。

这是我的js和ccs

    // Sticky Header
    jQuery(window).scroll(function() {
    console.log(jQuery(window).height());
    console.log(jQuery(document).height());
    if (jQuery(window).scrollTop() > 115 && jQuery(document).height() - (jQuery(window).height() + 345) > 0)
        jQuery('header').addClass('sticky-header');
    else 
        jQuery('header').removeClass('sticky-header');
});

header#header.sticky-header {
position: fixed;
top:0; 
left:0;
width: 100%;
z-index: 9999!important;
-webkit-backface-visibility: hidden !important;

}

以下是一些链接，可以看到它的实际效果。

在长页面上效果很好。 https://dev.myavenuea.com/

不适用于较短的页面。 https://dev.myavenuea.com/product-category/apparel/accessories-apparel/

Answer 1

我认为当你用345添加jQuery（窗口）.height时，我认为它实际上会增加窗口高度，导致它的毛刺。如果您可以克隆该值，然后将它们一起添加到if语句中，那么它就不应该是错误的。

Sticky Nav在较短的页面上发布

1 个答案: