How to make a HTML NavBar [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.

Closed 9 years ago.

Improve this question

I was wondering how to make a HTML navbar using CSS. I've already got most of the code done but I'm caught up on one part. I need the header to turn solid once it's past a div on the page. Is there some sort of CSS class to do this, or will I have to set up a JavaScript script to change the CSS as time goes on. You can see my code on this site: here. I'm sorry, I'm a noob to CSS, but I'm trying my best to learn.

EDITED PAST HERE:

In the "cover.css" script on the site I use the class "masthead" to define the portion of the site that I use as the 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;

}

After the user scrolls past a particular div on the page, I want to change the background-color: to solid black (#000). Hopefully this clarifies the question a bit.

Answer 1

You'll need javascript, I suggest you use jQuery as it simplifies things quite a bit: http://jquery.com/

And then write a script, something like:

$(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");
    }
})

And in your css you will need to set up the .fixed class:

.header {
    position: static;
}
.header.fixed {
    position: fixed;
    top:0
}

EDIT:

Here's a fiddle to demonstrate how to use it: http://jsfiddle.net/nY2ek/

Answer 2

I was wondering how to make a CSS header.

You can't. Headers are semantic, and CSS is only presentational. You must use HTML instead.

Answer 3

If you are looking for the code visit How to fix a header on scroll - it explains it all in detail.

Please comment back if you need any help.