I bet you have seen quite a few websites where in when you scroll the webpage, the menu bar of that webpage gets fixed or stuck at the top to allow you to easily navigate the website. In technical terms, it is called a Sticky Menu Bar. A sticky item is something that just sticks to any given position on the webpage, and it can be anywhere that you want.
Now, it is easy to create such a sticky menu on your webpage. All you need to do is write down a few lines of JavaScript code, and a CSS class. Apart from that, you obviously need a webpage, which has enough content that it requires scrolling. Also, when you make your Sticky menu bar, it is possible for you to style it in a different way, that you think goes well with your webpage when scrolled.
DEMO | DOWNLOAD
Before we proceed further, you might want to check out these other tutorials that are quite popular with other readers.
- Create a Drop Down Menu using CSS
- Create a Professional Looking Menu using CSS
- Using Notepad++ for Enhanced Programming Experience
Let’s get started with our tutorial to build a webpage with a Sticky Menu Bar.
HTML Part
The HTML Part is nothing too advanced. It just consists of various elements for our webpage that require you to scroll to be able to see the entire content. Also, on the top, we have a logo along with a full width Navigation bar, which is not a sticky menu bar as of now. The HTML part is quite simple, and you should not have any problem understanding it. Here is the HTML code.
<html> <head> <title>Sticky Menu Bar using jQuery - SlashCoding.com</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <img src="http://slashcoding.com/wp-content/uploads/2013/07/Name.png" alt="Logo"/> <nav> <div id="links"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Gallery</a> <a href="#">Contact</a> <a href="#">Subscribe</a> </div> </nav> <div id="filler"><h1>Hi! I'm a heading at the top of the page. Scroll down to see the magic!</h1></div> <h1>Hi! I'm a heading at the bottom of the page!</h1> </body> </html>
CSS Part
Now, in the CSS file that we have used, I have created styling for our navigation when the window is not scrolled. Now, when the window is scrolled, we need to fix the position of the menu bar to the top, and along with that, I would also reduce the opacity of the menu bar to 30% and changed the font color. For this utility, I have created a CSS class, that I have named “fixed”. Here is the CSS Code for this project. I have saved it in a file called style.css inside a folder called css.
a{
text-decoration:none;
color:inherit;
width:10%;
font-weight:bold;
display:inline-block;
}
a:hover{
color:#FFFFFF;
}
nav{
width:100%;
display:block;
background:#000000;
position:relative;
padding:10px 0;
color:#FFD700;
}
.fixed{
position:fixed;
top:0;
left:0;
color:#FFFFFF;
background:rgba(0,0,0,0.3) !important;
font-size:110%;
}
#filler{
width:100%;
height:150%;
display:block;
}
#links{
width:60%;
display:block;
margin:0 auto;
position:relative;
text-align:center;
}
Sticky Menu Bar using JavaScript
The JavaScript part of our code is where the magic happens. If you try to scroll the page right now, you will see that the menu bar just scrolls away from the page, and is no longer visible when you get to the bottom of the page. To overcome this, we will bind the Scroll function of our window to do a certain action, i.e. to add the class “fixed” to our navigation bar when we scroll 150 pixels of our page. To do this job, we can make use of the following code. Place the following code on your webpage (HTML Part), just before closing the body tag. We also require the use of a jQuery library, and we will import it directly from Google’s server.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 150) {
$('nav').addClass('fixed');
}
else{
$('nav').removeClass('fixed');
}
});
</script>
DEMO | DOWNLOAD
Well, that’s all for this tutorial. You have successfully created yourself a menu bar that will stay on top of the page even when the user scrolls. This simply allows the user to have an easy navigation for the entire site, even when scrolled. If you face any problem with this tutorial, feel free to get in touch with me via comments section below. Also, Don’t forget to subscribe to Slash Coding for latest post updates via RSS Feeds, Facebook, Google+ or Twitter.
