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

【问题标题】：Mechanism to update scroll index based on scroll position基于滚动位置更新滚动索引的机制
【发布时间】：2016-08-03 00:36:22
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript

【解决方案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

【讨论】：

我认为你的策略会奏效！这是可以尝试的 codepen：codepen.io/nicolasxu/pen/dXqKPR?editors=1111你知道这个功能的任何库吗？
scrollmagic.io 绝对是这个 ^^ ScrollMagic 真的很酷，有它正确的语法，但很容易学习，你真的可以添加一些基于滚动的很酷的动画