滚动上的香草 JS 框阴影答案

【问题标题】：Vanilla JS Box Shadow on Scroll滚动上的香草 JS 框阴影
【发布时间】：2016-09-08 14:36:17
【问题描述】：

我一直在学习 vanilla JS，这个问题的大多数解决方案都依赖于 jquery，我发现自己有点糊涂了。（这不是 js over jq 的说法，我正在寻找具体的解决方案）。

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

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

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

然后给它添加滚动事件：

header.onscroll = function(){};

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

【问题讨论】：

标签： javascript css menu navigation

【解决方案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>

【讨论】：

很棒的解决方案！但是为什么你将函数 myfunction 传递给 onscroll 函数呢？如果我只是做了一个window.onscroll = function(){并把函数代码放在这里}，那不行吗？
只是为了模块化，你也可以在 onscroll 里面有 myFunction 代码。

【解决方案2】：

您的代码绑定到 header 的 onscroll 事件，但根据您的解释，您可以绑定到正文的 onscroll 事件并检查 window.scrollY

http://mdn.io/scrollY

【讨论】：

啊。所以如果我让 var $content = (window)，我只检查 if y != 0?