全屏滚动案例
分析
2大步
第一步 单击 li 让 li里面 a href 对应的 div 滚动到相应的位置
第二大步 监听窗口滚动 切换导航的active
html
<div class="fi">
<div class="container">
<ul>
<li class="active"><a href="#sc1">第一屏</a></li>
<li><a href="#sc2">第二屏</a></li>
<li><a href="#sc3">第三屏</a></li>
<li><a href="#sc4">第四屏</a></li>
<li><a href="#sc5">第五屏</a></li>
<li><a href="#sc6">第六屏</a></li>
<li><a href="#sc7">第七屏</a></li>
</ul>
</div>
</div>
<div class="sc" id="sc1">
<h1>1</h1>
</div>
<div class="sc" id="sc2">
<h1>2</h1>
</div>
<div class="sc" id="sc3">
<h1>3</h1>
</div>
<div class="sc f4" id="sc4">
<h1>4</h1>
</div>
<div class="sc" id="sc5">
<h1>5</h1>
</div>
<div class="sc" id="sc6">
<h1>6</h1>
</div>
<div class="sc" id="sc7">
<h1>7</h1>
</div>
<p class="line"></p>
css
.active {
background-color: #ff3;
}
.sc { height: 600px;}
.sc:nth-of-type(2n+1) { background-color: yellow;}
.f4{ height: 1000px;}
第一步 单击 li 让 li里面 a href 对应的 div 滚动到相应的位置
$(function(){
$(".fi li a").click(function(e){
e.preventDefault()
$(window).unbind("scroll",checkScroll);//单击取消监听
var href=$(this).attr("href");//求出里面的href
$(this).parent().siblings(".active").removeClass("active");
//他的爹的兄弟有active 去掉active；
$(this).parent().addClass("active");//给a的爹加active
var offT=$(href).offset().top;//对应的div 距离顶部的距离
$("body,html").animate({"scrollTop":offT-50},600,function(){
$(window).bind("scroll",checkScroll);//动画完再监听
});
//让滚动条滚动到对应距离
})
第二步 监听窗口滚动 切换导航的active
1监听窗口滚动
2 滚动距离 与div距离顶部距离 对照，让对应div 的id 相对应的a 的父亲添加 active 其他去掉active
$(window).bind("scroll",checkScroll);//监听滚动
function checkScroll(){
var st=$(window).scrollTop();//拿到滚动的距离
var id;//存一个空的id值
$(".sc").each(function (index,elem){//循环每一个第
var offT=$(this).offset().top;//拿到每个div距离顶部的距离；
if(st>=offT-51){//滚动的距离大于 该div距离顶部的距离 （对应的div）51是导航的高度
id=$(this).attr("id");//获取他的id值
}
})
$("a[href=#"+id+"]").parent().siblings(".active").removeClass("active");
//id值对应的a 的父亲的兄弟有active 去掉active
$("a[href=#"+id+"]").parent().addClass("active")
//id值对应的a 的父亲添加active
}
