How to create a fixed menu on the scroll?
In this tutorial, a jQuery and CSS based menu is shared that will be fixed on top as you scroll down the page.
That way, your main content may appear on the top with the menu bar afterward. As the user scrolls down the page and passes the main content, the menu bar will be fixed on top.
In the next section, you can see a live demo of the fixed menu which is based on jQuery and CSS.
A demo of fixed menu on top
Click on the link or image below for opening the demo of fixed menu. You may change the look and feel of the menu by accessing and changing the properties in the fixed-menu class (placed under style section of the demo).
In the jQuery code, the addClass and removeClass class methods are used for adding and removing this class on the scroll. These methods are associated with the <nav> tag in the web page. Have a look:
See online demo and code
The CSS used for the demo:
|
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 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 |
<style> * {margin: 0; padding: 0;} a {text-decoration: none;} /* This class is added on scroll */ .fixed-menu { position: fixed; top: 0; height: 60px; z-index: 1; background-color: #B6DADA !important; } body { color: #fff; font-family: 'open-sans-bold', AvenirNext-Medium, sans-serif; font-size: 18px; text-align: center; } /* Navigation Settings */ nav { position: absolute; bottom: 0; width: 100%; height: 60px; background: #CFCFCF; } nav li { display: inline-block; padding: 24px 10px; } nav li a { color: #9398AE; } section { height: 100vh; } /* Content for demo */ #content1 { background: #60C4AF; } #content1 p { padding-top: 200px; } #content2 { background: #EBBD21; } #content2 p { padding-top: 100px; color:green; } #content3 { background: #E89766; } @media only screen and (max-width: 520px) { nav li { padding: 24px 4px; } nav li a { font-size: 14px; } } </style> |
The markup:
|
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 |
<section id="content1"> <p>Scroll down</p> <nav> <ul> <li><a href="https://www.jquery-az.com/">Home</a></li> <li><a href="https://www.jquery-az.com/jquery-tips/">jQuery</a></li> <li><a href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap</a></li> <li><a href="https://www.jquery-az.com/css-tutorials/">CSS</a></li> <li><a href="https://www.jquery-az.com/angularjs-tutorials/">Angular JS</a></li> <li><a href="https://www.jquery-az.com/javascript-tutorials/">JavaScript</a></li> </ul> </nav> </section> <section id="content2"> <p>A demo of fixed nav bar on scroll</p> </section> <section id="content3"></section> |
A few lines of code of jQuery:
|
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 |
<script> $(document).ready(function(){ $(window).bind('scroll', function() { var navHeight = $( window ).height() - 60; if ($(window).scrollTop() > navHeight) { $('nav').addClass('fixed-menu'); } else { $('nav').removeClass('fixed-menu'); } }); }); </script> |
That’s is it!
As the demo page loads, the .nav CSS class will apply to the menu bar. You may change the properties there like the background color of the navigation bar, font weight, font- family, size, color of text etc. Find these classes under the style tag for changing the look of menu bar as web page loads:
nav, nav li, nav li a
As mentioned earlier, as the page is scrolled down and up, the addClass and removeClass methods are used to attach and remove the fixed-menu CSS class.
Setting up this menu in your website
You may get the complete code in the demo page’s code section.
As such, this fixed solution is based on jQuery, so you have to include the jQuery library from CDN or host on your own.
No other dependency.
Simply use the style and adjust the markup according to the design or layout of your website!
Credit: atelierbram
