视差滚动菜单突出显示项

Question

我正在构建一个站点，并且这个功能已经在许多视差站点上使用过。当我将鼠标悬停在菜单项上时出现的三角形，我希望在单击特定菜单项以及滚动到特定部分时能够在特定菜单项上保持明显。

因此，当我单击“实时”时，三角形应该会出现并保持明显，或者如果我滚动到该部分，它应该会显示出来，并且所有其他部分都相同。

这是我正在使用的代码的一部分……如果我需要添加更多内容，请告诉我 http://jsfiddle.net/lemonhead1374/4HRxr/

这是html和CSS都在jsfiddle链接中的HTML

<div class="header">
        <div class="nav">
            <div class="inner">
        <a href="#home"> home</a>
        <a href="#live"> live</a>
        <a href="#learn">learn</a>
        <a href="#mission">mission</a>
        <a href="#heal">heal</a>
        <a href="#adorn">adorn</a>
        <a href="#sip">sip</a>
            </div>
        </div>
<div>



<section id="home">
<div class="lower">
<div class="homecontainer">
    <div class="binder">
       hi all            
    </div>
</div>
</div>
</section>

<section id="live">
 hi alllllllllll hellllloooo
</section>

Answer 1

有一个很好的例子already here at Stack Overflow 可以做你想做的事。它不仅提供了您正在寻找的代码和一个 jsFiddle 来查看它的所有工作，而且它非常简洁，并且不需要插件。 See it here.

如果您更喜欢使用插件，有一个有趣的插件，它使用直接的 Javascript called skrollr。它响应滚动事件并使用一种高度直观的方法对断点进行编码。值得一看。

我应该注意到，在看到您的代码时，您会遇到各种问题，不仅是您的基本 html 非常笨拙（大量嵌套的 div 和不必要的 ID在这个地方，甚至不是近乎语义的标记等）但在引擎盖下你的 Javascript 抛出了各种各样的错误，可能是因为你从另一个站点复制了大块代码。对于跨域问题、未找到网络字体和图像等，会抛出各种标志。您的代码是一团糟™。如果这是一个学习练习，那没关系，我猜。但如果这是其他人的客户工作，你肯定会想要解决所有这些问题，我猜你需要做一些功课才能开始。

如果您是初学者，或者即使您想对正确的编码技术进行良好的审查，也可以通过 ample resources all over the internet 学习正确的 html 和 css 编码，我会强烈建议通过tutorials at Code Academy。

如前所述，如果你提供的 url 只是为了你自己的学习，那么你就扔掉吧，这是一个非常公平的学习方式，尽管Code Academy 可能更有效。