javascript - 如何检测当前视窗的第一个h1元素

Question

目的是做 segmentfault 文章页目录随着页面滑动自动高亮的效果，不依赖插件实现

Answer 1

正好做过这个内容滑动，目录高亮显示的效果。

先说以下，动态去取当前视窗的第一个h1元素，想法很好，但行不通。

我的方案是，监听页面滚动事件。当某个h1的offsetTop到达一定位置，对应的目录项高亮。

代码就不贴了，自己写才有成就感。。。。

Answer 2

如果要做那种效果的话，不是获取当前视窗的第一个h1元素。

而是通过对scroll事件进行监听，然后通过对offset的判断，来判断当前浏览的是哪个标题下面的内容。

可以通过循环所有的标题，然后查看当前滚动的位置是在哪个标题下面。比如A,B两个标题，在A标题下面，B标题上面，那么当前查看的就是A标题，高亮A标题就好了。

Answer 3

就那么几个h1,全部加事件监听。和视口上方距离大于0且小于视口高度对应目录标签高亮。

不过segmentfault 文章页目录的效果是根据当前标题移动到视口上沿和下个标题移动到视口上沿做临界值做的效果。