Question

我想知道如何使用CSS制作HTML导航栏。我已经完成了大部分代码，但我抓住了一部分。一旦它超过页面上的div，我需要标题变为实体。是否有某种CSS类来执行此操作，或者我将不得不设置JavaScript脚本以随着时间的推移更改CSS。您可以在此网站上查看我的代码：here。对不起，我是CSS的菜鸟，但我正尽力学习。

在这里过去了：

在＆＃34; cover.css＆＃34;网站上的脚本我使用的是＆＃34;标头＆＃34;定义我用作NavBar的网站部分。

.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）。希望这有点澄清了这个问题。

Answer 1

你需要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
}

编辑：

这是一个演示如何使用它的小提琴：http://jsfiddle.net/nY2ek/

Answer 2

我想知道如何制作CSS标题。

你不能。标题是语义的，CSS只是表示性的。您必须改为使用HTML。

Answer 3

如果您正在寻找代码，请访问How to fix a header on scroll - 它会详细解释所有内容。

如果您需要任何帮助，请回复。

如何制作HTML NavBar

3 个答案: