Question

我了解如何创建固定的导航菜单。我正在设计的那个链接到页面上的各个锚点。我不明白的是如何让菜单项自动指示我在页面上的位置？没有JS可以做到这一点吗？

这种效果可以在许多单页设计中找到。例如：

http://www.thirdculturestudios.com/

任何帮助都将不胜感激。

Answer 1

我不知道在CSS中这样做的方法。您链接到的两个页面都涉及根据click事件动态添加/删除类。 CSS无法动态添加类。

如果您有兴趣，可以使用以下链接突出显示链接，具体取决于它是否仅在jQuery中点击：

<div id="container">
    <ul>
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">link 2</a></li>
    </ul>
</div>

var a = $('#container a');
a.click(function() {
    a.removeClass('active'); 
    $(this).addClass('active');
});

http://jsfiddle.net/H5rNM/

Answer 2

您可以使用<a name="resourceName" id="resourceName">锚标记进行跳转。但是平滑滚动到项目需要javascript。

你只需使用<a href="#resourceName">Text</a>跳转到它（非js世界）。

编辑：澄清语法，因为我尝试重读它并意识到这会让我感到困惑

Answer 3

没有Javascript就行不通。

Answer 4

如果没有JavaScript，你不能这样做，因为CSS ......好吧......级联。这些页面的工作方式是每个菜单项都有一个类.active或类似的，在单击该项时会添加。

编辑：我相信您正在寻找jQuery的scroll() (see here)，您可以在其中指定用户滚动时发生的功能。在这种情况下，该函数将检查scrollTop值并将其与页面部分的offset进行比较，然后将类添加到相应的菜单项中。

快速谷歌搜索这些术语将指向正确的方向。

响应式固定导航？

4 个答案: