用 jQuery 实现导航条锚链接滚动监听

Question

对于一个长网页，内容多了我们可以给他添加一个目录导航，就像 WIKI 系统一样，每个词条都有一个目录，我们可以根据这个目录大致的了解整个网页的内容。

有一点不足的就是，用户可能并不知道自己阅读到了哪个部分，因为这个时候我们的导航是死的，没有根据内容的阅读而有所变化，这篇文章就给大家分享用 jQuery 实现导航条锚链接滚动监听，给导航添加不一样的样式。

设计思路

1. 获取窗口滚动高度
2. 获取附加导航栏
3. 获取导航栏下的所有li
4. 通过相同class获取所有监听元素（此例中为jumbotron巨幕）
5. 遍历所有监听元素，若当前元素距离文档高度小于文档滚动条的垂直偏移量（即滚动高度），获取当前元素ID。（此处获取的ID值，实际为ID值覆盖替换，因为存在有多个元素的e当前元素距离文档高度小于文档滚动条的垂直偏移量的情况，但只有最后的ID是有效值，因为前边的会被后边的覆覆盖替换掉）
6. 给对应的导航添加 class（bootstrap中为给 li 添加 active ），先移出已有的 active，然后再添加。

实现方法

$(function() {
	//定义全局变量，获取附加导航栏、导航列表、链接、各楼层、各楼层距离文档的高度
	var menu = $("#add-nav"),
    lists = menu.find("li"),
    jumbotron = $(".jumbotron"),
    currentID;
	$(window).scroll(function() {
		//获取文档滚动高度
		var top = $(document).scrollTop();
		//遍历楼层
		jumbotron.each(function() {
			var $this = $(this),
				jumbotronTop =$this.offset().top;//获取当前楼层的高度
			if (top > (jumbotronTop - 200)) {
				currentID = "#" +　$this.attr("id");//每个小于top的楼层都会赋值一次，逐层覆盖替换，最后一层才是最后的id值
			}
			else {
				return false;
			};
		})
		//给相应楼层对应的附加到导航添加class
        //首先清除所有active
        var currentActive = menu.find(".active");
        if (currentID && currentActive.find("a:eq(0)").attr("href") != currentID) {
			currentActive.removeClass("active");
			//给相应导航添加class
			menu.find("[href="+currentID+"]").parent().addClass("active");
        }
	})
});

最后总结

• 用到的方法有：scroll()、scrollTop()、offset()、attr()、addClass()、removeClass()、find()、each()、parent()
• 其中重点说明：.offset() 内容相对于文档的偏移（不是浏览器窗口）