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

时间:2015-01-24 20:37:42

标签: javascript html css web scroll

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

我为每个部分的标题分配了一个ID,以及导航栏中的每个链接。

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

它在某种程度上起作用 - 导航中的四个链接,'主页','组合','联系'和'关于',每个都带有后缀'-nav'的ID都正确突出显示,除了'联系人' '链接。

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

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

有什么想法吗?

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

目前,我正在寻找一种方法,使各部分之间的过渡有点“自动化”和顺畅。

1 个答案:

答案 0 :(得分:0)

如果我正确理解您并且您现在只想要各部分之间的自动转换,那么您应该查看:

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

注意:此插件需要加载jQuery