Fixed Menu Bar On Top When Scrolled Using jQuery

In this tutorial, I am going to show you how to design Fixed Menu Bar On Top When Scrolled Using jQuery. Fix menu bar is a smart designing system. Much high profile websites use this. If you do not know what is fix menu bar you should know about it. Fix menu bar is a designing system when a user scroll down web page then fixed menu after scroll at the top of this page. It helps to accelerate page visit for a website and motivate a user to visit another page. We say that fixed menu bar on scroll is a part of modern design.

How to create Fixed Menu Bar?

We can create this using HTML, CSS, jQuery And this is pretty easy like Animated Scroll To Top Using jQuery. We have created this already and we are using this on our website. for an example scroll down this webpage, you will see our menu will fix at the top of the page. We used it. Let's see how to create this. We are gonna to create a working demo for it. Follow my step by step directions.

Step-1 Create Style For Menu

We are going to create our necessary styles for the menu. Create a directory name as assets and create a styles.css file into assets directory. Write down these CSS codes into the style.css file.

styles.css

#main,
.navigation {
 display: block
}

#main {
 background-color: #F3F8FA;
 border-top: 1px solid #E3E6E8;
 border-bottom: 1px solid #E3E6E8;
 overflow: hidden;
}
.navigation ul {
 list-style-type: none;
 display: block;
 text-align: center
}

.navigation li,
.navigation li a {
 font-size: 13px;
 display: inline-block
}

.navigation li {
 list-style-type: none;
 position: static;
 color: #FFF;
 -webkit-transition: border-bottom .25s ease .1s;
 -moz-transition: border-bottom .25s ease .1s;
 -o-transition: border-bottom .25s ease .1s;
 -ms-transition: border-bottom .25s ease .1s;
 transition: border-bottom .25s ease .1s;
 border-bottom: 2px solid transparent
}

.navigation li a {
 padding: 3px;
 outline: 0
}

@media only screen and (min-width:768px) {
 .navigation li {
 position: relative;
 font-size: 17px;
 border-bottom: 5px solid transparent
 }
 .navigation li a {
 padding: 10px 15px;
 font-size: 17px;
 font-weight: 400
 }
}

.navigation li:hover ul.dropdown {
 display: block
}

.navigation li ul.dropdown {
 position: absolute;
 display: none;
 width: 200px;
 background: #00695b;
 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
 padding-top: 0
}

.navigation li ul.dropdown li {
 display: block;
 list-style-type: none
}

.navigation li ul.dropdown li a {
 padding: 10px;
 font-size: 15px;
 color: #fff;
 display: block;
 border-bottom: 1px solid #005c4d;
 font-weight: 400
}

.navigation li ul.dropdown li:last-child a {
 border-bottom: none
}

.navigation li:first-child:hover a {
 border-radius: 3px 0 0 3px
}

.navigation li ul.dropdown li:hover a {
 background: #56b5ae
}

.footerNav,
.user {
 background: #FFFFFF
}

.navigation li ul.dropdown li:first-child:hover a {
 border-radius: 0
}

.navigation li:hover .arrow-down {
 border-top: 5px solid #fff
}
.home{color:#EB5745}
.blog{color:#EF8D24}
.about{color:#666699}
.portfolio{color:#3CBC8D}
.contact{color:#1C94C9}
p a{text-decoration:none;font-size:25px;}

We have created our necessary styles. Here is full styles of menu you can add your custom styles. Now we are going to create our next step. There we create important jQuery events.

Step-2 Create jQyery Event

In this step we create our necessary jQuery events which will helps us fix our menu. create jQuery.js file into asstets directory and write down this code.

jQuery.js

$(document).ready(function(e) {
 function a() {
 e("#main"), e(window).scrollTop() > 150 ? (e("#main").css({
 position: "fixed",
 width: "100%",
 "z-index": "1000",
 top: "0px"
 })) : (e("#main").css({
 position: "relative",
 width: "",
 top: "auto",
 "z-index": "0"
 }))
 }
 e(window).scroll("slow", a), a()
})

Here is the jQuery code that fix #main div after scrolling 150px from top. You can change this as you wish. Now we need go our next step.

Step-3 Create Display File

in this step we are going to create a display file where fix menu will be visbale. Create a HTML file name as index.html and write down this code.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Menu Bar Fixed On Top When Scrolled - PHPAns</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"; rel="stylesheet">
<link href="assets/styles.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>;
<script src="assets/jQuery.js"></script>
</head>
<body>
<h1 class="text-center">Menu Bar Fixed On Top When Scrolled Demo</h1>
 <div id="main" class="container">
 <nav>
 <div class="navigation">
 <ul>
 <li><a href="#" class="home">Home</a></li>
 <li><a href="#" class="blog">Blog</a></li>
 <li><a href="#" class="about">About Me</a></li>
 <li><a href="#" class="portfolio">Portfolio</a></li>
 <li><a href="#" class="contact">Contact Me</a></li>
 </ul>
 </div>
 </nav>
 </div>
<div class="container">
.. Your content ..
</div>
<h6 class="text-center">&copy; PHPAns 2016</h6>
</body>
</html>

Our index file ready. when you use this on your web page then you need to scroll down at least 150px to see the result. This Scrolling fix will work when your webpage will scroll down 150px or more from the top of the page. Make a working demo you should do that. You can use this you custom pages as you want. We have added a demo link and you will see the fixed menu bar on scroll example and can easily guess how this works. We also attached source code with this article, You can download and see the instant demo. We have added some text and images in our demo file and you can change these when you use this. You are free to edit and use this fixed menu. I hope you understand it and this is helpful for you. If you have any question or comment about jQuery Fixed Menu Bar article please don't hesitate to do that, please comment your question in comment section.