当到达文档中的不同点时,导航栏突出显示适当的 link

Nav bar highlighting appropriate link when distinct point in document is reached

到目前为止我尝试过的是将 'body' 元素存储在一个指向 $('body').scrollTop() 的变量中,该变量位于一个滚动函数中,该函数用于跟踪其中的位置用户滚动的页面。如果仅使用鼠标滚轮滚动,数字范围通常是从 0(页面顶部)到页面底部的任何值,间隔为 100(每个刻度)。

我为每个部分的 header 以及导航栏中的每个 link 分配了一个 ID。

每次达到其中一个间隔(在部分/部分之间)时,所有当前突出显示都将被删除,然后应用适当 link 的突出显示。

它在一定程度上起作用 - Nav 上的四个 link,'home'、'portfolio'、'contact' 和 'about',每个都有 ID除了 'contact' link 之外,所有以“-nav”为后缀的都正确突出显示。

目前每个部分的高度相等,我的 HTML 或我的 js 文件中没有拼写错误。 'contact' link 突出显示的逻辑遵循与其他导航 link 突出显示相同的模式 - 但没有突出显示。

另一个问题是我不确定如何实现某种捕捉效果。我希望用户能够阅读页面的整个部分,然后当该部分到达末尾时,文档将流畅地滚动到下一部分的顶部。

有什么想法吗?

编辑:第一个问题已经解决。

目前我只是在寻找一种方法,使各部分之间的过渡稍微 "automated" 和平滑。

如果我对你的理解是正确的,而你现在只想要部分之间的自动转换,你应该查看:

http://nick-jonas.github.io/windows/

注意:此插件需要jQuery加载