How to Create a Sticky Navigation with CSS3 & jQuery

In this tutorial, I am going to show you that how to create a sticky navigation bar with CSS3 & JQuery.

In the modern website, Most of the website use this feature of sticky navigation. It is one of the idea to attract user to visit their website.

When webpage will more large and include large amount of content in the page this type of navigation will be used for make user friendly website.

If Navigation bar will sticky then user can click on the menu from any where and easily redirect on other page. So, It will be used for get more and more traffic on your website.

Now , we will see the example that how to create a sticky navigation with CSS3 and JQuery. Here, I describe all steps. Follow the steps and run the example :

JAVASCRIPT :

• First of all , add this external jquery file to apply jquery in this example

1	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

• Now, This code is used for add wrapper elements for set positioning of the element.

1 2 3

jQuery("nav").wrap('<div class="nav-placeholder"></div>'); jQuery("nav").wrapInner('<div class="nav-inner"></div>'); jQuery(".nav-inner").wrapInner('<div class="nav-inner-most"></div>');

• This function will run on load page and window resize and it will only update navset when if it will not fixed position.

1 2 3 4 5 6 7

function stickyUtility() { if (!jQuery("nav").hasClass("fixed")) { navset = jQuery("nav").offset().top; } }

• This function will be used for when scroll event will fire.

1 2 3 4 5 6 7 8 9 10 11

jQuery(window).scroll(function() { scrollPos = jQuery(window).scrollTop(); if (scrollPos >= navset) { jQuery("nav").addClass("fixed"); } else { jQuery("nav").removeClass("fixed"); } });

Full Code of JQuey file :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

jQuery(document).ready(function() { var navset, scrollPos = 0; jQuery("nav").wrap('<div class="nav-placeholder"></div>'); jQuery("nav").wrapInner('<div class="nav-inner"></div>'); jQuery(".nav-inner").wrapInner('<div class="nav-inner-most"></div>'); function stickyUtility() { if (!jQuery("nav").hasClass("fixed")) { navset = jQuery("nav").offset().top; } } stickyUtility(); jQuery(window).resize(function() { stickyUtility(); }); jQuery(window).scroll(function() { scrollPos = jQuery(window).scrollTop(); if (scrollPos >= navset) { jQuery("nav").addClass("fixed"); } else { jQuery("nav").removeClass("fixed"); } }); });

CSS :

• Write this css code in your css file.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98

html { padding: 0; margin: 0; } body { font-family: Helvetica, sans-serif; line-height: 1.5em; padding: 10px 0; margin: 0; } p { margin: 0 0 2em 0; } .container { width:100%; margin: 0 auto; position: relative; } nav { z-index: 500; width:100%; background-color: black; } .fixed { position: fixed; top: 0; left: 0; width: 100%; } .fixed .nav-inner-most { width:100%; margin: 0 auto; background-color: black; } nav ul { margin: 0; padding: 0; } nav ul li { list-style: none; float: left; } .right { list-style: none; float: right; } nav ul li a:link, nav ul li a:visited { display: block; text-decoration: none; padding: 10px 40px; background-color: black; color: orange; font-size: 90%; font-weight: bold; } nav ul li a:hover { background-color: orange; color: black; } nav ul li:last-child a:link, nav ul li:last-child a:visited { border-right: none; } .list:before, .list:after { content: ""; display: table; } .list:after { clear: both; }

HTML

• Now write the html code in your html file.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<div class="container"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha-IlXS0OWTL94fRftSaAYi93uSmxUntsEo0IxaNc_5y5bCC_D30_jNUlPXnYMalBzpkPWbHnJEKWRTffEJMa1I6uZMADQaa8vwihg5oSgnj8HvY8lBy_9DE8JOaFY-oMCXqQ9krhR3Ss/s1600/gold-coast-australia-Australia-lake-Sunrise-Morning-315x851.jpg" width="100%" height="50%" /> <nav> <ul class="list"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li class="right"><a href="#">Sign Out</a></li> <li class="right"><a href="#">Sign In</a></li> </ul> </nav><!-- /navigation --> <!-- write down description of the page--> </div>

Full Source Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

<html lang="en"> <head> <title>Desire Code : Sticky Navigation Tutorial</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" /> <link rel="stylesheet" media="screen, projection" href="css/screen.css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div class="container"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha-IlXS0OWTL94fRftSaAYi93uSmxUntsEo0IxaNc_5y5bCC_D30_jNUlPXnYMalBzpkPWbHnJEKWRTffEJMa1I6uZMADQaa8vwihg5oSgnj8HvY8lBy_9DE8JOaFY-oMCXqQ9krhR3Ss/s1600/gold-coast-australia-Australia-lake-Sunrise-Morning-315x851.jpg" width="100%" height="50%" /> <nav> <ul class="list"> <li><a href="http://desirecode.blogspot.in">Menu 1</a></li> <li><a href="http://desirecode.blogspot.in">Menu 2</a></li> <li><a href="http://desirecode.blogspot.in">Menu 3</a></li> <li><a href="http://desirecode.blogspot.in">Menu 4</a></li> <li><a href="http://desirecode.blogspot.in">Menu 5</a></li> <li class="right"><a href="http://desirecode.blogspot.in">Sign Out</a></li> <li class="right"><a href="http://desirecode.blogspot.in">Sign In</a></li> </ul> </nav> <!-- write down description of the page--> </div> </body> </html>

Output :

Click Here For Live Demo :

Live Demo