javascript - 滚动时更改菜单 css

Question

因此，当我向下滚动到 100 像素以下时，我希望菜单变得透明，但是当您滚动回顶部时，它又恢复为纯色。

我的菜单示例:

<div id="menu" class="transparent">
    <menu tags etc>
</div>

CSS

#menu {
background-color: black
}
.transparent {
opacity: 0.5
transition: all 0.5s
}

如何使用 JavaScript 执行此操作？不确定我是否已经弄错了，因为由于透明类，我的菜单已经透明了。

Answer 1

你需要这样写:

$(document).scroll(function() {

  var scrollTop = $(window).scrollTop();
        if (scrollTop >= 200 ) {
            $('#menu').addClass("transparent");
        }
        else{
            $('#menu').removeClass("transparent");
        }
});

https://jsfiddle.net/jho5nnxj/