全屏滚动案例

分析

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 
    
}