javascript - 滚动时添加文本阴影(jquery 或 javascript)

Question

我有这个 html 和 css 代码:

<div class="header">

</div>

.header {
    top:0;
    left:0;
    right:0;
    width:100%;
    background:#3b5998;
    height:95px;
    margin-bottom: 50px;
position:fixed;
}

我在这里尝试做的是，只要用户向下滚动，标题就应该位于固定位置(顶部)。对于那件事我没有任何疑问。我很轻松地完成了这项任务。

我想在用户向下滚动时为其添加不同的样式。当用户向下滚动时，我想在它上面添加一个框阴影效果，这样它看起来就会升高。如果用户向上滚动并到达我网页的顶部，它将恢复为默认的 css 样式(没有框阴影)。

更像是在说:

向下滚动 = 激活框阴影效果

如果向上滚动并到达顶部 = 返回

我不知道有任何 css 代码，也许有人会用他们的 javascript/jquery 专业知识帮助我制作代码？

抱歉，如果我的解释太长或有点困惑。非常感谢!

Answer 1

这样试试

$(window).scroll(function(){
if (document.body.scrollTop === 0)
     $(".header").css({"box-shadow":"none"});
else
     $(".header").css({"box-shadow":"0px 0px 1px #EEE"});
});

See Demo For Reference only