Slash Coding

  • Android Development
  • CSS
  • Subscribe
  • About Us
  • Contact Us
You are here: Home / Web Development / jQuery / How to Create a Sticky Menu Bar using jQuery

How to Create a Sticky Menu Bar using jQuery

By Aneesh Bhatnagar

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.

Sticky Menu Bar

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.

Did you enjoy this article?
Subscribe to our email alerts when we post something new so you don't miss out.

About Aneesh Bhatnagar

Aneesh Bhatnagar is a freelance web developer, who specializes in front-end website development with HTML5, CSS3 and jQuery. He believes in transforming the entire web into a Responsive Web. He also specializes in use of Bootstrap framework to get websites up and running.

Search Slash Coding

Follow Us

RSS Feeds Facebook Twitter Follow Google+

Categories

  • Android Development
  • C++
  • Developer Tips
  • Slash Coding
  • Web Development
    • CSS
    • JavaScript
    • jQuery
    • PHP

Recently Published

  • Moving Ahead from Front End and Android Development
  • How to Export a Project from Android Studio
  • What is jQuery? Let’s Answer this Common Question today!
  • Mobile App Prototyping : Pixate Studio
  • How to Create a Countdown Timer using jQuery

Subscribe to Email Alerts

Eager to learn more from Slash Coding?
Sign up for daily email updates when anything new comes up. Get it straight in your inbox.

Follow Us on Social Media

RSS Feeds Facebook Twitter Follow Google+

Copyright © 2025 · Slash Coding · Powered by the Genesis Framework
Sitemap | Privacy Policy | About | Contact

×
Get Notified of the new Tutorials when they are posted!
Never miss any article update from Slash Coding. Subscribe to email alerts today!