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

《jQuery滚动导航跟随（锚点定位切换）》正文开始，本次阅读大概4分钟。

关于使用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/javascriptsrc=http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js/script
scriptsrc=nav.js/script!----------文章中提供了JS，请下载使用------------
/head
body
divclass=topbox/div
divclass=nav-heightid=navHeight
navclass=nav-wrapid=nav-wrap
divclass=nav-mobileClick/div
ulclass=clearfix
liaclass=activehref=#section1nav1/a/li
liaclass=href=#section2nav2/a/li
liaclass=href=#section3nav3/a/li
liaclass=href=#section4nav4/a/li
/ul
/nav
/div
divid=section1class=section-content
1
/div
divid=section2class=section-content
2
/div
divid=section3class=section-content
3
/div
divid=section4class=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