Question

我需要帮助，我的导航栏是透明的背景，所以当我滚动＆gt; 540px导航栏变黑，但滚动时> 540px并更新了导航栏变得透明的页面，直到我做了最小滚动，我该如何解决问题？

$(window).on('scroll', function() {
    if ($(this).scrollTop() > 540) {
        $('.sec').addClass('navbar-index-scroll animated fadeInDown').removeClass('fadeOutUp');
    } else {
        $('.sec').removeClass('fadeInDown').addClass('fadeOutUp');
    }
});

Answer 1

当您浏览网站时，例如使用刷新或历史记录（后退/前进）按钮，浏览器会记住旧的滚动状态。

要补偿已滚动的页面，您可以：

// 1. Create a function to handle the navbar states/styles

function navbarScrollposStyles() {
    if($(window).scrollTop() > 540) {
        $('.sec').addClass('navbar-index-scroll animated fadeInDown').removeClass('fadeOutUp');
    } else {
        $('.sec').removeClass('fadeInDown').addClass('fadeOutUp');
    }
}

$(navbarScrollposStyles);                           // 2. Do on DOM ready and 
$(window).on('load scroll', navbarScrollposStyles); // 3. on window.onload and onscroll

P.S：在您的特定代码中，我无法理解navbar-index-scroll animated块中未正确处理的类else，...但这是另一双鞋。

此外，对于某些.sec元素，在每个滚动“tick”（事件）上查询文档的成本非常高。您应将选择器缓存到var $sec = $(".sec"); - 的变量中你也可以通过使用一些 Throttle function 来阻止此类事件被解雇太多次并降低性能。

导航条问题并滚动jQuery

1 个答案: