Fatal编程技术网
  • html/
  • Html 不带JS的滚动导航栏

Html 不带JS的滚动导航栏

html css navigation scroll

Html 不带JS的滚动导航栏,html,css,navigation,scroll,Html,Css,Navigation,Scroll,我在的一个产品网站上看到了一个很棒的导航菜单。 发生的情况：如果向下滚动“功能”、“规格”、“评论”之间的导航更改 没有JS我怎么做，怎么做？或者我应该搜索什么？（注意：我已经研究过了，但不知道如何称呼这种效应）。 谢谢。我认为这是不可能的，至少在滚动时不改变菜单。您可以通过跳转到目标（a href=“#a”转到div id=“a”）然后使用：targetCSS选择器来创建这样的菜单。或者，如果您不喜欢Florija的干净解决方案，您可以从Javascript

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

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

或者，如果您不喜欢Florija的干净解决方案，您可以从Javascript

不幸的是，它必须使用JavaScript/JQuery完成。如果你正在寻找一个好的开始，请上网查找一些已经制作好的脚本。GitHub承载着惊人的脚本，通常是免费使用的

我将用这段代码帮助您

第一件事是制作一个包装器，然后在包装器内部，您需要“main”和“nav”。我使用这种格式是为了减少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;
}


身体{
/*布拉布拉*/
}
#包装纸{
/*布拉布拉*/
}
#导航{
位置：固定；
高度：40px；
排名：0
保证金：0自动；
背景色：黑色；
/*喋喋不休*/
}
#主要{
保证金：0自动；
最小高度：1200px；
最大高度：100%；
黑色底色：青色；
顶部：40px；
位置：相对位置；
}
如果您想要所需的精确代码：如果您正在寻找类似的代码，那么这就是您的精确解决方案。使用JQuery航路点

它是一个脚本，当点击选择器（在网站上，它将是一个类）时，它将执行特定的代码。在本例中，为导航栏添加.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>

$（'.firstwaypoint'）。航路点（函数（）{
$（'#navbar1'）。删除（）；
$（'#nav'）。追加（“内容”）；
});
内容
然后将其转换为：

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


这里有新内容
这是假设代码，我没有测试它。我假设它可以工作，因为这是一个非常基本的jquery。

什么让你认为它没有用JS完成？因为它是。。。。