javascript - 当相应的页面 div 可见时，使用 jQuery 将一类事件添加到导航项？

Question

所以我是一个 jQuery 菜鸟，我不知道以下是否可行 - 至少我是这么想的 - 或者如何去做。

当前设置

http://joelglovier.com
所以我有一个一页的迷你网站，在屏幕顶部有一个固定的导航。所有(除了一个)导航元素只需将用户向下滚动到页面下方相应的 div。我已经设置好了。

我想做什么...

当列表项定位在页面上各自的 div 上时，我想使用 jQuery 将一类“事件”添加到列表项 anchor 。最好不要使用点击功能，这样即使用户只是简单地向下滚动页面而不点击导航元素来获取它们，也会有同样的体验。类似于 phpfog home page .

我查看了 phpfog.com 的设置方式，据我所知，它使用某种类型的计算和窗口选择器来应用该类，但是 A) 我不完全理解它在做什么或如何做构建类似的东西，并且 B) 我不知道他们是否以最直接的方式进行。

我用简单的英语语句写出了我想要完成的事情，因为我对 jQuery 的掌握还不够，无法用语法将其写出来:

If .section-link is in the window on the href value of same id, add class of "active"

所以这是我的代码(仅 HTML，CSS 无关紧要，因为我已经知道我想如何设置它的样式，只想在适当的位置添加事件类):: p>

<div id="site-nav">

<div class="wrap">

    <ul id="nav-links">

        <li class="section-title-nav top">
            <h4><a href="#jag-home" class="section-link scroll">Home</a></h4>
        </li>

        <li class="section-title-nav skills">
            <h4><a href="#background-section" class="section-link scroll">Background</a></h4>
        </li>

        <li class="section-title-nav projects">
            <h4><a href="#projects-section" class="section-link scroll">Projects</a></h4>
        </li>

        <li class="section-title-nav blog">
            <h4><a href="http://blog.joelglovier.com" class="section-link">Blog</a></h4>
        </li>

        <li class="section-title-nav random">
            <h4><a href="#random-section" class="section-link scroll">Random</a></h4>
        </li>

        <li class="section-title-nav credits">
            <h4><a href="#credits-section" class="section-link scroll">Credits</a></h4>
        </li>

    </ul>

</div>

</div>

在页面的下方，导航中链接到的部分标记如下:

<div id="random-section" class="main-section wrap clearfix">

    <h2 class="section-title"><span class="bg">Random</span></h2>
    <span class="section-title-border"></span>

    <h2 class="coming-soon">COMING SOON</h2>

</div><!--/#random-section-->

因此，我正在寻找关于如何完成此任务的提示，或者我是否以错误的方式思考它。谢谢!

Answer 1

这是我整理的一个工作示例；我将是第一个承认它可以改进的人，但它可能会给你一个不错的工作起点。

http://jsfiddle.net/nogoodatcoding/KMwhZ/1/

---

基本思想是监听窗口上的 scroll 事件，然后，对于每个导航链接，提取 href 值并检查相应的元素是否可见或不是。如果是，则选择它的链接并取消选择先前突出显示的元素。当找到第一个可见部分时，我提前中断了，您可以通过一直浏览列表来获得稍微不同的行为。

当 div 在 height 中足够小时，当页面一直滚动到底部时多个 div 可见时，我的示例会中断 - 在这种情况下，最低的几个 div 的链接将永远不会突出显示。但是，即使您链接到的 phpfog 页面似乎也是如此 - Testimonials 和 Free Tools 的链接永远不会被激活，因为我的显示器足够高，可以显示最后一个一直向下滚动时的 3 个部分。请注意，如果不提前中断，则不会出现这种情况 - 在那里，最后可见的部分将突出显示。但是您随后会看到相反的问题 - 顶部的链接从未激活，因为其他内容始终可见。