用 jQuery 实现导航条锚链接滚动监听 - 文章教程

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

发布于 2018-06-06 字数 2168 浏览 2045 评论 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() 内容相对于文档的偏移(不是浏览器窗口)

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

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

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论