导航栏固定、锚点平滑滚动

共计 2805 个字符，预计需要花费 8 分钟才能阅读完成。

页面用的 Bootstrap 框架
页面布局
<!– 导航 –>
<nav class=”navbar navbar-default navbar-fixed-top”>
<div class=”container”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″ aria-expanded=”false”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”#”>
<img alt=”Brand” width=”20″ src=”https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2154195776,3216516198&fm=58&bpow=451&bpoh=451″>
</a>
</div>
<div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″>
<ul class=”nav navbar-nav”>
<li id=”navbar1″ class=”active”><a href=”#part1″> 导航一 </a></li>
<li id=”navbar2″><a href=”#part2″> 导航二 </a></li>
<li id=”navbar3″><a href=”#part3″> 导航三 </a></li>
<li id=”navbar4″><a href=”#part4″> 导航四 </a></li>
</ul>
</div>
</div>
</nav>
导航栏固定, 页面滚动时导航栏高亮显示
方案一：
$(window).scroll(function() {
// 为页面添加页面滚动监听事件
var wst = $(window).scrollTop() // 滚动条距离顶端值
console.log(“ 滚动条距离顶端值:” + wst)
var len = 5;
for (var i = 1; i < len; i++) {// 加循环
console.log(“item 距离顶端值:” + $(“#part” + i).offset().top);

var next = i + 1;
var itemOffsetTop = $(“#part” + i).offset().top;

console.log(i);
if (i === (len – 1)) {
var condition = itemOffsetTop <= wst;
} else {
var itemNextOffsetTop = $(“#part” + next).offset().top;
var condition = itemOffsetTop <= wst && itemNextOffsetTop >= wst;
}
console.log(condition, i)
if (condition) {// 判断滚动条位置
$(‘.navbar-nav li’).removeClass(“active”); // 清除 c 类
$(“#navbar” + i).addClass(“active”); // 给当前导航加 c 类
}
}
})
方案二：
1. 导航栏固定不透明
$(window).scroll(function () {
var $nav = $(“.navbar-collapse ul li”),
length = $nav.length-1, // 获取导航菜单 ul li 的个数
item = new Array(), // 新建一个数组
sTop = $(window).scrollTop(); // 获取偏移的高度
for (var i = 0; i < length; i++) {
if (i == 0) {
item[i + 1] = $(“.page-wrapper>div:first-child”).offset().top;
if (sTop >= item[i + 1]) {
$nav.eq(i).addClass(“active”).siblings(“li”).removeClass(“active”);
}
} else {
item[i + 1] = $(“.page-wrapper>div:nth-child(” + (i + 1) + “)”).offset().top;
if (sTop >= item[i + 1] – 100) {
$nav.eq(i).addClass(“active”).siblings(“li”).removeClass(“active”);
}
}
}
})
2. 导航栏固定透明
$(window).scroll(function () {
var $nav = $(“.navbar-collapse ul li”),
length = $nav.length, // 获取导航菜单 ul li 的个数
item = new Array(), // 新建一个数组
sTop = $(window).scrollTop(); // 获取偏移的高度
for (var i = 0; i < length; i++) {
item[i + 1] = $(“.page-wrapper>div:nth-child(” + (i + 1) + “)”).offset().top;
if (sTop >= item[i + 1]) {
$nav.eq(i).addClass(“active”).siblings(“li”).removeClass(“active”);
}
}
})
方案三：
利用 Bootstrap 的 data-spy=”scroll”

<!– 导航 –>
<nav class=”navbar-default navbar-static” role=”navigation”>
</nav>
<!– 主页面 –>
<div data-spy=”scroll” :style=”{height: scrollHeight}” data-target=”.navbar-default” data-offset=”0″ class=”page-wrapper”>
<!– …… –>
</div>

<!– JS –>
$(‘body’).scrollspy({target: ‘.navbar-default’})
锚点平滑滚动
$(‘a’).click(function(){
// 根据 a 标签的 href 转换为 id 选择器，获取 id 元素所处的位置，并高度减 50px（这里根据需要自由设置）
$(‘html,body’).animate({scrollTop: ($($(this).attr(‘href’)).offset().top)}, 500);
});