Today I am going to share a quick tutorial on how to make a sticky header with Javascript. This can also be used as a sticky navigation or menu bar. Have you ever wondered how some websites create that effect where the header seems to follow you down the page as you scroll? Well, stick around and find out how it is done!
This is what we’re going for. See how the header just sticks to the top of the window as you scroll down? Pretty neat huh?
Setting up your HTML
We’ll start by setting up our HTML file with the proper tags. Just make sure you put in plenty of content, so you are able to scroll. Make sure to link to your CSS style sheet if you are using an external CSS file, and do the same with your JS file. Since this is a very short script, it is also perfectly acceptable to put your <script> tag at the bottom of the <body> element within the content of your HTML file.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="top-container">
<h1>Scroll Down</h1>
</div>
<div class="header" id="myHeader">
<h2>My Header</h2>
</div>
<div class="content">
<h3>Lets get this party scrollin</h3>
<p>PUT YOUR PAGE CONTENT HERE. JUST ENOUGH TO SCROLL DOWN. WON'T BE ABLE TO SCROLL WITHOUT CONTENT! SO PUT SOME HERE</p>
</div>
</body>
</html>As you can see, we have a container for the top portion of our header to hold our <h1> element. Underneath that is where we will place our sticky header. Just create a <div> and give it a class of “header” and an id of “myHeader” and don’t forget to fill up the “content” <div> with plenty of content so you are able to scroll down.
Let’s start adding some style.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
color: #fff;
text-shadow: black 1px 5px 12px;
}
.top-container {
background-image: url("YOU CAN SET THIS TO WHATEVER YOU WANT");
background-color: #fff;
padding: 3rem;
text-align: center;
}
.header{
padding: 0.6rem 1.3rem;
background: #222;
color: #fff;
box-shadow: black 1px 5px 12px;
}
.content {
padding: 5rem;
}You can set the background image in the top container if you want the header’s top portion to have a picture. You can also just set a plain background color or gradient if that is your preference.
Once we have our main elements styled, it is time to create the sticky classes, which we will then turn on and off using Javascript.
Add the following classes to your CSS file:
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}Once we have this done, it is time to start building the script.
We’ll start by setting a function to run on scroll in our JS file.
window.onscroll = function() {myFunction()};Once we do this, we are going to create two variables.
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;The first variable is targeting the header using getElementById. The second is getting the distance of that header from the top. In other words:
The header.offsetTop returns the distance of the outer border of the header relative to the inner border of the top of the parent or the closest positioned ancestor element.
The next part of our code will be a function that tells our header to add a class if the window is scrolled down a greater distance than the height of the “sticky” variable we just made.
It will remove the class once we scroll back up. Like so:
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}Our finished product should now scroll with a sticky header that follows you down the page as you scroll!
Final Thoughts
I’m a lifelong student of web development, just like you. If you want to know where I learned how to make this, check out W3Schools. They have a lot of cool free stuff to help you learn!
JavaScript is great for all sorts of interactive effects. One of my favorite basic JavaScript hacks is a scroll indicator. If you want to create a similar effect WITHOUT JavaScript, check out my tutorial on how to make a fixed menu with CSS.
You can combine JavaScript with CSS and other libraries to make some really neat projects. Keep practicing!
If you think that was fun or have trouble and need some help, feel free to comment below. I hope you enjoy it and, most importantly, have fun!
