我有一个包含此CSS属性的菜单:
#header {
width: 100%;
position: fixed;
z-index: 9000;
overflow: auto;
}
因此,基于上面的CSS属性,无论滚动如何,此元素(#header
)显然都会保持在顶部。我想要实现的是向上滚动并向下滚动,底部框阴影应该添加到该元素(#header
)中,并且一旦到达该元素的默认位置就应该被移除({{1} })这显然是页面的最顶层。
我愿意接受任何建议和推荐。
答案 0 :(得分:26)
$(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>
每当滚动页面时,我们都会在变量(scroll
)中保存文档顶部的当前距离。
如果当前位置大于0,我们将课程active
添加到#header
。
如果当前位置等于0,我们将删除该类。
答案 1 :(得分:3)
创建一个名为shadow的类,添加到window.scroll上的标题div。
var top = $('#header').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= 60) { $('#header').addClass('shadow'); }
else { $('#header').removeClass('shadow'); }
});
.shadow {
-webkit-box-shadow: 0px 10px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 10px 5px rgba(50, 50, 50, 0.75);
box-shadow: 0px 10px 5px rgba(50, 50, 50, 0.75);
}