javascript - 卷轴上的 Vanilla JS 框阴影

Question

我一直在学习 vanilla JS，这个问题的大部分解决方案都依赖于 jquery，我发现自己有点糊涂了。 (这不是 js over jq 的争论，我正在寻找特定的解决方案)。

我正在尝试创建一个在固定位置菜单滚动时激活的框阴影。

如果我在变量中捕获 header 元素，

var header = document.getElementById("header");

然后给它添加滚动事件:

header.onscroll = function(){};

此时我要检查什么？ Y 偏移量？

Answer 1

这应该有帮助

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("fixedMenu").className = "myFixedMenu-box-shadow";
    } else {
        document.getElementById("fixedMenu").className = "myFixedMenu";
    }
}

body{
height: 900px;
}
.myFixedMenu{
width : 100%;
height: 70px;
background-color: black;
position: fixed;}

.myFixedMenu-box-shadow{
  width : 100%;
height: 70px;
background-color: orange;
  position: fixed;
  box-shadow: 0px 0px 5px 5px #e1e1e1;
}

<div class="myFixedMenu" id="fixedMenu">
Some Menu Item
</div>