我有一个这个CSS属性的菜单：
#header {
width: 100%;
position: fixed;
z-index: 9000;
overflow: auto;
}
所以基于上面的CSS属性,这个元素(#header)显然会保持在顶部,而不管滚动.我想要实现的是向上滚动并向下滚动,底部框阴影应该添加到该元素(#header)中,并且一旦达到该元素(#header)的默认位置即被删除,这显然是页面最上方的地方.
我可以接受任何建议和建议.
解决方法
DEMO
每当页面滚动时,我们将文档的顶部的当前距离保存在变量(滚动)中.
如果当前位置大于0,我们将类激活添加到#header.
如果当前位置等于0,我们删除该类.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$("#header").addClass("active");
}
else {
$("#header").removeClass("active");
}
});
CSS
#header.active {
Box-shadow: 0 0 10px rgba(0,0.4);
}
