Fixed header that will gradually disappear when the page is scrolled down

Question

How can I design a fixed header that will gradually disappear when the page is scrolled down. My header contains a nav bar and a brand logo. I want it to be fix on top but gradually disappear when the scroll bar is rolled down the page.

Answer 1

Make a scroll event / something that happens when someone scrolls, then check window's pageYOffset, if its greater than your navbar's height, just turn its display to none, or whatever animation u want.

let header = document.querySelector("header")
window.onscroll = (e)=> {
if (window.pageYOffset > 70) {
header.style.display = "none"
} else {
header.style.display = "block"
}
}

Answer 2

just simply have one header and style it as you want using CSS.

Then in JavaScript, handle onscroll event and perform any animation you want to.

Answer 3

🔫 Rick Grimes not really clear to me because I'm yet to learn js

Answer 4

Josh, I don't think there is anyway to handle scroll events without JS.

you should learn JS Basics before trying something like this.

scroll events:
https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event