基于滚动位置更新滚动索引的机制

Question

我注意到this site上的一个功能： 和this site上的功能：

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

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

Answer 1

好的，我们有两件事要处理：

• 我们必须知道特定部分的顶部何时位于视口的顶部（您的浏览器窗口）

• 然后，只有当特定部分如果在顶部我们根据它更新菜单

您可以通过向您的部分添加特定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，你会做相应的事情

请参阅：Getting Window X Y position for scroll和On Scroll Animation using jQuery