页面顶部的透明导航

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