Jquery实现页面滚动时导航智能定位

页面滚动的时候，侧边辅助导航提示到对应的内容。尤其是对于内容很长的页面很好的一个体验。

借助jquery，可以轻松实现。

  <!-- 侧边导航 -->
<div class="subaside" id="JS_subaside">
      <ul>
           <li class="current"><a href="#qiye_jianjie">企业简介</a></li>
           <li><a href="#uniao_wenhua">公司文化</a></li>
           <li><a href="#licheng">公司历程</a></li>
           <li><a href="#shili">技术实力</a></li>
           <li><a href="#rongyu">荣誉成果</a></li>
           <li><a href="#jiagou">组织架构</a></li> 
           <li><a href="#tuandui">团队风采</a></li>
      </ul>
</div>
<!-- 侧边导航 end -->

// 内容部分
<div class="contents">
    <div class="JS_section" id="qiye_jianjie"></div>
    <div class="JS_section" id="uniao_wenhua"></div>
    <div class="JS_section" id="licheng"></div>
    <div class="JS_section" id="shili"></div>
    <div class="JS_section" id="rongyu"></div>
    <div class="JS_section" id="jiagou"></div>
    <div class="JS_section" id="tuandui"></div>
</div>

要实现两个功能：

1、页面滚动，导航自动定位

2、点击导航项，页面滚动到对应位置。

// 滚动导航定位
function scrollNav(){
        var  sections = $(".JS_section"); 
        var  s_num = sections.length;
        sections.each(function(index,el){
            var _this = $(this);
            if( _this.offset().top <  $(document).scrollTop() +  偏移值 ){
                $("#JS_subaside li").removeClass("current").eq(index).addClass("current");
            }
        });
    }

// sub aside 点击
$("#JS_subaside li").on("click",function(e){
        var _this = $(this);
        var a = _this.children("a");
        var _href = a.attr("href");
        e.preventDefault() ;
        $("body,html").animate({
            'scrollTop': $(_href).offset().top - 偏移值
        });
});


// 给窗口添加滚动事件
$(window).on("scroll.nav",function(e){  
        scrollNav();  // 滚动导航
});
$(window).trigger("scroll.nav");

这里的“偏移值”说明下，因为在实际的项目中，不是所有的内容出现都是抵在浏览器顶部的，都会有一定的距离。这个“偏移值”就是这个距离。

不同的项目，这个“偏移值”是不一样的。