jq实现滚动悬浮和锚点跳转

一.html

    <img src="" alt="">
  <nav>
    <ul>
      <li class="active">首页</li>
      <li>首页商城</li>
      <li>首页哈哈</li>
      <li>首页开始对接客户是</li>
    </ul>
  </nav>
  <div id="div1">首页</div>
  <div id="div2">首页商城</div>
  <div id="div3">首页哈哈</div>
  <div id="div4">首页开始对接客户是</div>

二.css

	<style>
	    *{
	      padding:0;
	      margin:0;
	      list-style: none;
	      box-sizing: border-box;
	    }
	    body{
	      /* height:2000px; */
	      background: linear-gradient(blue, pink);
	    }
	    nav{
	      width:800px;
	      margin:0 auto;
	      padding:10px 30px;
	      background: orange;
	      position: absolute;
	      left:50%;
	      top:634px;
	      transform: translateX(-50%)
	    }
	    li{
	      display: inline-block;
	      font-size: 16px;
	      color:#fff;
	      padding:0 20px;
	    }
	    li.active{
	      background: pink;
	      color:orange;
	    }
	    img{
	      width:100%;
	       display: block;
	    }
	    .nav-fixed{
	      position: fixed;
	      top:0;
	      left:50%;
	      transform: translateX(-50%);
	    }
	    div{
	      height:600px;
	      border:1px solid white;
	      margin:30px auto;
	      font-size: 30px;
	    } 
	    #div1{
	      margin-top:80px;
	    }
	  </style>

三.jq

<script>
 //分析
 /*
  1. 滚动条滚动到某个点然后导航固定定位
  2. 导航到达文档顶部的距离【docuHeight】是判断依据
  3. 当滚动条滚动的高度大于等于docuHeight的时候触发固定定位，否则回到标转文档流
 */
 var div1Top = $("#div1").offset().top;
 var div2Top = $("#div2").offset().top;
 var div3Top = $("#div3").offset().top;
 var div4Top = $("#div4").offset().top;
 var navTop = $( "nav" ).offset().top;
 $(window).scroll(function(){
  var scrollHeight = $(window).scrollTop();
  if(scrollHeight>=navTop){
    $("nav").addClass("nav-fixed");
  }else{
    $("nav").removeClass("nav-fixed"); 
  }
  // 单个导航的判断
  if(scrollHeight>=div1Top &&scrollHeight<div2Top){
    $("li").removeClass("active");
    $("li").eq(0).addClass("active"); 
  }
  
  if(scrollHeight>=div2Top &&scrollHeight<div3Top){
    $("li").removeClass("active");
    $("li").eq(1).addClass("active"); 
  }
  
  if(scrollHeight>=div3Top &&scrollHeight<div4Top){
    $("li").removeClass("active");
    $("li").eq(2).addClass("active"); 
  }
  
  if(scrollHeight>=div4Top){
    $("li").removeClass("active");
    $("li").eq(3).addClass("active"); 
  }
  
 })

 $("li").click(function(){
   var index = $(this).index();
   var scHeight = $("div").eq(index).offset().top+1; 
   $("html").animate({
     "scrollTop":scHeight+"px"
   })
 })

</script>