如何用JavaScript编写实现网页楼层导航功能的长尾关键词代码？

本文共计1297个文字，预计阅读时间需要6分钟。

电梯+指引+关于楼层导航而言，还有一个重要的功能是，随着滚动条滚动，达到某一层时自动同步亮点，显示楼层导航的小图片。由于我之前也说了不打算使用JQ，所以想尝试用JS去实现它，实现起来并不难。

壹 ❀ 引言

对于楼层导航而言，还有个重要的功能就是，随着滚动条滚动，达到某层时得同步点亮楼层导航的小图片。

由于我前面也说了不打算使用JQ，所以想着用JS去实现它，实现并不难，主要得弄清滚动满足怎样的条件才应该点亮对应楼层，我们先看看实现效果：

贰 ❀ 实现思路

第一点，因为是由滚动触发的楼层判断，所以肯定离不开onscroll事件。

第二点，我们貌似要获取每个楼层顶端距离视窗顶部的距离，随着滚动条往下滚动，此距离会不断缩小，当接近到某个距离时我们判定此楼层入画，当然其它楼层都满足此判定。

而JQ提供了一个offset().top方法能获取这个值，js中只有一个offsetTop属性，获取的是距离自己最近position属性为非static的祖先元素的距离，此距离不随滚动条滚动而缩小。

当然我们有方法模拟计算出offset().top的值，但没必要

这里我直接引用了我之前博客得到的结论：offset().top =offsetTop -scrollTop(offsetTop参考对象为根元素)。

为了方便理解，我们假设楼层壹顶端距离视窗顶端为0时，此时判定楼层壹入画，即楼层导航中第一个按钮应该被点亮。