1、当前滚动的地方的窗口顶端到整个页面顶端的距离：
var scrollTop = $(window).scrollTop();
2、获取指定元素的页面位置：
$(obj).offset().top;
3、对页面滚动条滚动的监听：要放在页面加载的时候
$(window).scroll(function(event){
});
4、设置滚动条到指定位置。$(window).scrollTop(offset)
HTML：结构层
<div class="box">
<div class="nav"></div>
<div class="banner"></div>
</div>
CSS:样式层
{
margin:0;
padding:0;
}
.box{
width:100%;
height:1500px;
}
.nav{
width:100%;
height:800px;
background:red;
}emphasized text*
.banner{
width:100%;
height: calc(1500px - 1000px);
background:#000;
}
javascript:行为层
$(document).ready(function(){
//获取banner的高度
var bannerH=$(".banner").offset().top;
// console.log(bannerH);
//滚动事件
$(window).scroll(function(){
//滚动的高度
var scrollTop=$(this).scrollTop();
console.log(scrollTop);
//判断bannerH大于或者等于scrollTop高度
if(scrollTop >= bannerH ){
$(".nav").css("background","#000");
$(".banner").css("background","red");
}else{
$(".nav").css("background","red");
$(".banner").css("background","#000");
}
})
});
1、当前滚动的地方的窗口顶端到整个页面顶端的距离：
var scrollTop = $(window).scrollTop();
2、获取指定元素的页面位置：
$(obj).offset().top;
3、对页面滚动条滚动的监听：要放在页面加载的时候
$(window).scroll(function(event){
});
4、设置滚动条到指定位置。$(window).scrollTop(offset)
HTML：结构层
<div class="box">
<div class="nav"></div>
<div class="banner"></div>
</div>
CSS:样式层
{
margin:0;
padding:0;
}
.box{
width:100%;
height:1500px;
}
.nav{
width:100%;
height:800px;
background:red;
}emphasized text*
.banner{
width:100%;
height: calc(1500px - 1000px);
background:#000;
}
javascript:行为层
$(document).ready(function(){
//获取banner的高度
var bannerH=$(".banner").offset().top;
// console.log(bannerH);
//滚动事件
$(window).scroll(function(){
//滚动的高度
var scrollTop=$(this).scrollTop();
console.log(scrollTop);
//判断bannerH大于或者等于scrollTop高度
if(scrollTop >= bannerH ){
$(".nav").css("background","#000");
$(".banner").css("background","red");
}else{
$(".nav").css("background","red");
$(".banner").css("background","#000");
}
})
});