javascript - 页面顶部的透明导航

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>