有时候遇见这样的需求:一个栏目在顶部的时候想与banner合为一体,所以背景颜色不改变,而滑动以后想给栏目新增一个背景颜色,这样的需求我们可以用一个js来实现。
<script>
function scroll() {
var top = $(".navbar-fixed-top").offset().top;//获取导航栏变色的位置距顶部的高度
var scrollTop = $(window).scrollTop();//获取当前窗口距顶部的高度
if (scrollTop <= top&top!==0) {
$('.navbar-fixed-top').css('background-color', '#333');
} else {
$('.navbar-fixed-top').css('background-color', 'transparent');
}
}
$(window).on('scroll', function() {
scroll()
});
</script>
.navbar-fixed-top是你要修改的顶部栏目的class名字,这里你需要修改掉。