我有一个带有以下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>
每当页面滚动时,我们会将当前距离文档顶部的距离保存在一个变量(scroll
)中。
如果当前位置大于0,则将类active
添加到#header
中。
如果当前位置等于0,则删除该类。
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);
}
body > #header { position: fixed; }
是必需的。 - hungerstar