Question

我在Sony的产品网站上看到了一个很棒的导航菜单。会发生什么：如果向下滚动“功能”，“规格”，“评论”，......之间的导航更改我怎么能做到这一点，我可以没有JS吗？或者我应该搜索什么？（注意：我已经研究但不知道如何调用此效果）。谢谢。

Answer 1

我不认为这是可能的，至少在滚动时不改变菜单。您可以通过跳转到目标（a href="#a"转到div id="a"）然后使用:target CSS选择器来制作这样的菜单。

Answer 2

或者，如果你不喜欢Florija的干净解决方案，你可以从Javascript中寻找ScrollIntoView（）

Answer 3

Twitter Bootstrap - 它被称为scrollspy ...但它使用JavaScript。没有它，没有办法做到这一点。它虽然很容易实现。

http://getbootstrap.com/javascript/#scrollspy

Answer 4

不幸的是，必须使用JavaScript / JQuery。如果您正在寻找一个好的开始，请在线查看已经制作的一些脚本。 GitHub拥有令人惊叹的脚本，通常是免费使用的。

我会用这一点代码帮助你。

第一件事就是制作一个包装器，然后在那个包装器中，你需要＆＃34; main＆＃34;和＆＃34; nav＆＃34;。我这样做是为了减少Javascript中的脚本。然后在CSS中，标记它们并设置它们的样式。确保导航位置：固定，并从顶部设置：0px。然后对于main，将其设置为top :(用于导航栏高度的像素数）。不要将主要设置为固定。然后你很高兴去。导航栏将始终位于顶部，然后其下方的所有内容都会滚动。我使用此系统稍微退出以避免编写脚本。接下来你应该看看Florija的解决方案，然后在它上面添加一些JQuery。

<body>

<div id="wrapper">

<div id="nav"></div>
<div id="main"></div>

</div>

</body>

body {
    /*blabla*/
}
#wrapper {
    /*blabla*/
}
#nav {
    position:fixed;
    height: 40px;
    top:0
    margin: 0 auto;
    background-color:black;
    /*blablabla*/
}
#main {
    margin: 0 auto;
    min-height: 1200px;
    max-height: 100%;
    blackground-color: cyan;
    top: 40px;
    position: relative;
}

如果你想要你需要的精确代码：如果你正在寻找类似的东西，那么这就是你的完全解决方案。使用JQuery航点！

http://imakewebthings.com/jquery-waypoints/

它是一个脚本，在点击选择器（在网站上，它将是一个类）时，它将执行某个代码。在这种情况下，它将是.remove（前一个div及其内容），然后是导航栏的.append（带有新内容的新div）。正如你所看到的那样，它粗糙而简单，但为了明确这一点，我们可以完成工作。

例如

$('.firstwaypoint').waypoint(function() {
$('#navbar1').remove();
$('#nav').append("<div id="navbar2">content</div>");
});

<div id="nav">
<div id="navbar1">content</div>
</div>

然后将其转换为：

<div id="nav">
<div id="navbar2">the new content goes here</div>
</div>

这是假设的代码，我没有测试它。我假设它有效，因为这是非常基本的jquery。

不使用JS滚动导航栏

4 个答案: