jQuery滚动导航跟随（锚点定位切换）

关于使用jquery导航跟随置顶的插件，在之前已经分享过几个了：

1、jQuery 导航菜单、广告 —— 固定、置顶、跟随

2、jQuery 智能判断跟随页面滚动的导航、菜单、广告，下拉后跟随置顶特效代码

3、jQuery - 多个菜单导航滚动跟随，全部积累固定在顶端

4、jquery 滚动跟随 到达底部时会停止跟随特效代码

而今天要分享的，是带锚点定位自动跟随！

这是一个插件，所以JS：nav.zip

!DOCTYPE html>
    html>
     head>
      meta charset="UTF-8">
      title>
    导航滚动到一定高底后吸顶，锚点定位自动跟随/title>
      style type="text/css">
  *{
    margin: 0;
     padding: 0;
}
  .topbox{
     height: 500px;
     background-color: #313131;
 }
  .section-content{
     border-bottom: 5px solid #0000FF;
     min-height: 500px;
     background: #eee;
     width: 1200px;
     margin: auto;
     line-height: 500px;
     text-align: center;
 }
  .nav-height{
     position:relative;
     height: 50px;
}
.nav-wrap {
     width: 100%;
    height: 50px;
    background: #fff;
}
.nav-wrap.navFix{
    position: fixed;
    top: 0;
    left: 0;
      box-shadow: 0 0 5px rgba(0,0,0, 0.2);
    border-bottom:1px solid #e3e3e3\9;
     z-index: 99999;
}
 .nav-wrap ul {
    padding: 0;
    margin: 0 auto;
     width: 1200px;
     display: block;
     border-bottom: 2px solid #eee;
}
.nav-wrap.navFix ul{
     border-bottom: 0;
}
.nav-wrap li {
     display: inline-block;
     text-align: left;
    height: 50px;
     line-height: 50px;
     float: left;
}
.nav-wrap li a {
    display: block;
    padding: 0 20px;
    font-size:20px;
     color: #333;
     text-decoration: none;
}
.nav-wrap li a:hover{
    color: #4680d1;
}
.nav-wrap li a.active {
    border-bottom:2px solid #4680d1;
    color: #4680d1;
}
.nav-mobile {
    display: none;
    font-weight: bold;
    width: 100%;
}
.click-me {
    width: 150px;
    height: 30px;
     background: #4680d1;
    color: white;
     text-align: center;
    line-height: 30px;
}
.click-me a {
    display: block;
    color: white;
}
      /style>
      script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    /script>
      script src='nav.js'>
    /script>
    !----------文章中提供了JS，请下载使用------------>
     /head>
     body>
      div class="topbox">
    /div>
      div class="nav-height" id="navHeight">
        nav class="nav-wrap" id="nav-wrap">
            div class="nav-mobile">
    Click/div>
            ul class="clearfix">
              li>
    a class="active" href="#section1">
    nav1/a>
    /li>
              li>
    a class="" href="#section2">
    nav2/a>
    /li>
              li>
    a class="" href="#section3">
    nav3/a>
    /li>
              li>
    a class="" href="#section4">
    nav4/a>
    /li>
            /ul>
         /nav>
      /div>
       div id="section1" class="section-content">
         1   /div>
       div id="section2" class="section-content">
         2   /div>
       div id="section3" class="section-content">
         3   /div>
       div id="section4" class="section-content">
         4   /div>
       div style="height: 1000px;
    background: #f5f5f5;
    ">
    footer/div>
       !--内容信息导航吸顶及锚点引入JS-->
              script>
  //内容信息导航吸顶   $(document).ready(function(){
        var navHeight= $("#navHeight").offset().top;
        var navFix=$("#nav-wrap");
    $(window).scroll(function(){
         if($(this).scrollTop()>
navHeight){
          navFix.addClass("navFix");
     }
     else{
          navFix.removeClass("navFix");
     }
     }
)    }
)  //内容信息导航锚点     $('.nav-wrap').navScroll({
        mobileDropdown: true,        mobileBreakpoint: 768,        scrollSpy: true      }
    );
        $('.click-me').navScroll({
        navHeight: 0      }
    );
        $('.nav-wrap').on('click', '.nav-mobile', function (e) {
            e.preventDefault();
            $('.nav-wrap ul').slideToggle('fast');
      }
    );
      /script>
     /body>
    /html>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！