如何根据浏览位置自动对应目录中某个 item ？

Question

一篇文章生成了目录，当用户在浏览的时候，浏览到某个 h2 的时候，目录里对应的 h2 样式自动高亮，一般的做法是给这个 h2 加个 active 或 current class，比如，

这种该如何实现呢？

我刚入前端，对 jq 和 js 还不太熟悉，网上找了一下也没找到，希望有大兄弟指点一下，谢谢。

Answer 1

HashChangeEvent监听该事件

Answer 2

var object = document.getElementsByClassName('要设置样式的元素')[0]
_object_.addEventListener("mouseenter",_myScript_);

function _myScript_(el){
    el.classList.add('要增加的类名')
}

Answer 3

1.尝试使用 IntersectionObserver API来监控对应DOM原始是否出现在viewport中，按出现的比例来动态设置相关元素的class，jq中有便捷的方法来添加或删除class
2.可通过监听scroll滚动事件来检查DOM元素的滚动，需要添加节流和防抖动函数，提供页面响应速度

Answer 4

如果不太熟悉 可以搜索一些插件实现， 这种行为 一般成为 scrollspy 。