根据滚动位置更新滚动索引的机制

Question

我注意到此站点上的一个功能：和此站点上的功能：

如果滚动中间部分的项目，则左侧菜单标题将根据中间部分滚动位置的位置进行更新。

我知道它必须处理中间部分的滚动事件，但是那又如何呢？ 它是否仅使用现有的库？ 实现此功能的机制是什么？

Answer 1

好的，所以这里有两件事要处理：

• 我们必须知道特定部分的顶部何时在视口的顶部（您的Webrowser窗口）

• 然后只有当特定部分位于顶部时，我们才根据该菜单更新菜单

您可以通过在部分中放置特定的ID，然后获取该元素的offset.top（）位置并侦听window.onscroll以及当前滚动位置等于的offset.top（）位置来轻松实现此目的。您的元素，您可能会在菜单中添加一个活动类

像这样

 <div id="my-section"></div>
 var mySection = document.getElementById("my-section"),
     mySectionTopPosition = mySection.offsetTop,
     currentWindowScrollPosition = window.pageYOffset;

然后，如果currentWindowScrollPostion === mySectionTopPosition，您将做相应的事情

看到此内容： 使用jQuery 获取滚动的XY窗口位置和滚动动画