Instead of describing exactly what a sticky header / nav is, check out the demo and scroll down to see some MAGIC
I’m sure you’ve seen websites with a top header / navigation which at first has a static position, but then when you start to scroll down the page out of its view, it magically re-appears with a fixed position. How did that happen? The javascript is actually really simple.
<script>
onscroll = function() {
var nav = document.getElementById('nav')
if (window.pageYOffset > 300){
nav.className = 'scrolled'
} else {
nav.className = ''
}
}
</script>
All we’re doing here is first calling a function if the page is being scrolled. Note that the onscroll event handler is active continually while you’re scrolling. Inside the function, we get the amount that the page has been scrolled using window.pageYOffset. This is returned in px, and you can choose any value that works appropriately for your site, in the example I used 300. Then we just add a class to the navigation if the page is scrolled down below 300px, and remove that class if it’s above that point.
In this class of “scrolled”, I positioned the nav to be fixed to the top of the screen. There’s also some other basic styling going on here, but I really wanted to keep it as basic as possible. Be sure to notice the <div id="placeholder">Which holds the nav’s place once its no longer there. Without this, the content will jump up to fill in the space of the missing nav.
The only other trick that’s notable is the way I use the position:fixed. On the original #nav I have a transition:all 1s I know that the height of the nav is 60px, so in the “scrolled” class, I actually make the top:-60px then give it a margin-top:60px. This is what gives it that animated look like its coming down from the top of the screen. The full markup for the page is here, or you can always just view the source of the demo page, as always I only include the bare basics in the demo so that its easy to sift through and cut code from.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sticky Header</title>
<script>
onscroll = function() {
var nav = document.getElementById('nav')
if (window.pageYOffset > 300){
nav.className = 'scrolled'
} else {
nav.className = ''
}
}
</script>
<style>
* {margin:0; padding:0}
h1 {margin:60px;}
#nav {background: black;transition:all 1s}
#nav li {float:left; width:23.33%; text-align:center; list-style:none; margin:20px 5%; background:white; }
#nav li:last-child {clear:right}
#placeholder {height:100px}
.scrolled {width:100%; position:fixed; top:-60px; margin-top:60px; background:white !important; border-bottom: 4px solid !important;}
.scrolled li {margin:5px 5% !important}
#wrap {width: 90%; max-width:600px; margin:auto}
</style>
</head>
<body>
<h1>Page Title</h1>
<div id="placeholder">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<div style="clear:both"></div>
</ul>
</div>
<p>Lorum Ipsum...</p>
</body>
</html>
Are you using a sticky header in your site? We would love to see it, post your links below