我有一个具有以下 CSS 属性的菜单：
#header {
width: 100%;
position: fixed;
z-index: 9000;
overflow: auto;
}
因此，根据上面的 CSS 属性，该元素 (#header）显然无论滚动如何都会保持在顶部。我想要实现的是向上滚动和向下滚动，应将底部框阴影添加到该元素中（#header）并且一旦到达该元素的默认位置（#header）这显然是页面的最顶部。
我愿意接受任何建议和推荐。
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$("#header").addClass("active");
}
else {
$("#header").removeClass("active");
}
});
body {
height: 2000px;
margin: 0;
}
body > #header{position:fixed;}
#header {
width: 100%;
position: fixed;
z-index:9000;
overflow: auto;
background: #e6e6e6;
text-align: center;
padding: 10px 0;
transition: all 0.5s linear;
}
#header.active {
box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">HEADER</div>
JSFiddle版本 http://jsfiddle.net/KVpBE/
每当页面滚动时，我们都会将距文档顶部的当前距离保存在变量中（scroll).
如果当前位置大于 0，我们添加该类active to #header.
如果当前位置等于 0，我们将删除该类。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
