javascript - 导航栏和滚动 jQuery 出现问题

Question

我需要帮助，我的导航栏是透明背景，所以当我滚动 > 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-scrollanimated 类在 else block 中没有得到正确处理，……但那是另一对鞋子。

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