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

发布于 2018-06-06 10:26:29 字数 1632 浏览 2124 评论 0

对于一个长网页,内容多了我们可以给他添加一个目录导航,就像 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() 内容相对于文档的偏移(不是浏览器窗口)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。