关于使用jquery导航跟随置顶的插件，在之前已经分享过几个了：
1、jQuery 导航菜单、广告 —— 固定、置顶、跟随
2、jQuery 智能判断跟随页面滚动的导航、菜单、广告，下拉后跟随置顶特效代码
3、jQuery – 多个菜单导航滚动跟随，全部积累固定在顶端
4、jquery 滚动跟随 到达底部时会停止跟随特效代码
而今天要分享的，是带锚点定位自动跟随！
这是一个插件，所以JS：nav.zip
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>导航滚动到一定高底后吸顶，锚点定位自动跟随</title><styletype="text/css">*{margin:0;padding:0;}.topbox{height:500px;background-color:#313131;}.section-content{border-bottom:5pxsolid#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:005pxrgba(0,0,0,0.2);border-bottom:1pxsolid#e3e3e3\9;z-index:99999;}.nav-wrapul{padding:0;margin:0auto;width:1200px;display:block;border-bottom:2pxsolid#eee;}.nav-wrap.navFixul{border-bottom:0;}.nav-wrapli{display:inline-block;text-align:left;height:50px;line-height:50px;float:left;}.nav-wraplia{display:block;padding:020px;font-size:20px;color:#333;text-decoration:none;}.nav-wraplia:hover{color:#4680d1;}.nav-wraplia.active{border-bottom:2pxsolid#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-mea{display:block;color:white;}</style><scripttype="text/javascript"src="/libs/jquery/2.1.4/jquery.min.js"></script><scriptsrc= av.js></script><!----------文章中提供了JS，请下载使用------------></head><body><divclass="topbox"></div><divclass="nav-height"id="navHeight"><navclass="nav-wrap"id="nav-wrap"><divclass="nav-mobile">Click</div><ulclass="clearfix"><li><aclass="active"href="#section1">nav1</a></li><li><aclass=""href="#section2">nav2</a></li><li><aclass=""href="#section3">nav3</a></li><li><aclass=""href="#section4">nav4</a></li></ul></nav></div><divid="section1"class="section-content">1</div><divid="section2"class="section-content">2</div><divid="section3"class="section-content">3</div><divid="section4"class="section-content">4</div><divstyle="height:1000px;background:#f5f5f5;">footer</div><!--内容信息导航吸顶及锚点引入JS--><script>//内容信息导航吸顶$(document).ready(function(){varnavHeight=$("#navHeight").offset().top;varnavFix=$("#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-wrapul).slideToggle(fast);});</script></body></html>
