<分区>
标签 html css css-position
<分区>
我想知道如何使用 CSS 制作 HTML 导航栏。我已经完成了大部分代码，但我只完成了一部分。我需要标题在经过页面上的 div 后变为实体。是否有某种 CSS 类可以执行此操作，或者我是否必须设置一个 JavaScript 脚本来随着时间的推移更改 CSS。你可以在这个网站上看到我的代码:here .抱歉，我是 CSS 的菜鸟，但我正在努力学习。
在这里编辑过去:
在站点的“cover.css”脚本中，我使用类“masthead”来定义我用作导航栏的站点部分。
.masthead {
background-color: #000;
background-color: rgba(0,0,0,0.5);
position: fixed;
top: 0;
border-style: solid;
border-color: rgba(0,0,0,0.5);
border-radius: 5px;
在用户滚动经过页面上的特定 div 后，我想将 background-color: 更改为纯黑色 (#000)。希望这能稍微澄清这个问题。
最佳答案
您将需要 javascript，我建议您使用 jQuery，因为它可以大大简化事情:http://jquery.com/
然后写一个脚本，比如:
$(window).on('scroll', function(e) {
var scrollTop = $('body').scrollTop();
if (scrollTop > 300) { //300 is pixels you scrolled, it's just an example
$('.header').addClass("fixed");
} else {
$('.header').removeClass("fixed");
}
})
并且在您的 css 中，您需要设置 .fixed 类:
.header {
position: static;
}
.header.fixed {
position: fixed;
top:0
}
编辑:
这是一个演示如何使用它的 fiddle :http://jsfiddle.net/nY2ek/
关于html - 如何制作 HTML 导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22970747/