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会引发各种错误，可能是因为你从另一个站点复制了大块代码。对于跨源问题，未找到的webfonts和图像等，会抛出各种各样的标志。您的代码是混乱的。如果这是一次学习练习，那我觉得没关系。但如果这是其他人的客户工作，你肯定会想要修复所有这些，我猜你需要做一些功课才能开始。

如果您是初学者，或者即使您希望对正确的编码技术进行良好的审核，也可以ample resources all over the internet学习正确的html和css编码，我会高度推荐通过tutorials at Code Academy。

如前所述，如果你提供的网址只是为了你自己的学习，然后捶打，这是一种非常公平的学习方式，尽管Code Academy可能更有效率。

Parallax Scrolling菜单突出显示项目

1 个答案: