页面顶部的透明导航

Question

我有以下代码，当用户滚动时，可以在导航div中添加/删除类。

 setInterval(function() {
  if (didScroll) {
  hasScrolled();
  didScroll = false;
}
}, 100);

function hasScrolled() {
    if ($(window).width() > 768) {
        var st = $(this).scrollTop();
        if (Math.abs(lastScrollTop - st) <= delta) {
            return;
        }
        if (st > lastScrollTop && lastScrollTop >= 0 && st > 0) {
            $('#anim-nav').removeClass('nav-down').addClass('nav-up');

        } else {
            $('#anim-nav').removeClass('nav-up').addClass('nav-down');

        }
    }
    lastScrollTop = st;
}

});

我想在用户靠近屏幕顶部时将.trans-bg添加到＃anim-nav中。 它具有白色背景，但是当它到达屏幕顶部或顶部时，我希望它在图像上方透明。 但是，当我将其添加到此功能时并不可靠。 有时它会保持透明，或者不透明。

不确定如何添加可以连续运行的内容，以确保用户是否靠近/位于其顶部。

Answer 1

也许这可以帮助？

 $(window).on('scroll', function () { if ($(window).scrollTop() > 10) { $('body').addClass('scrolled'); } else { $('body').removeClass('scrolled'); } }); 

 body { background: url("https://www.toptal.com/designers/subtlepatterns/patterns/christmas-black.png"); height: 3000px; } .scrolled .header { background-color: rgba(255, 255, 255, .8) } .header { background-color: #fff; height: 80px; position: fixed; left: 0; top: 0; right: 0; transition: .2s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header class="header"></header> 

Answer 2

解决方案：聆听滚动更改，而不是间隔检查滚动。

使用javaScript监听顶部滚动的示例：

window.addEventListener('scroll', function(e) {
    if (document.body.scrollTop == 0) {
        alert("top");
    }
});