Smart jQuery Scrolling Navigation Bar Plugin - Scroll Nav

File Size: 6.43KB
Views Total: 27689
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Smart jQuery Scrolling Navigation Bar Plugin - Scroll Nav

Scroll Nav is a lightweight (~3kb unzipped) and smart jQuery plugin for creating a sticky navigation bar at the top of you web page that will auto hide (reappear) when scrolling down (up) the page. 

How to use it:

1. Load the latest version of jQuery javascript library and jQuery Scroll Nav script on the web page

<script src=""></script>
<script type="text/javascript" src="jquery.scrollnav.js"></script>

2. Include Twitter's bootstrap for better experience and mobile compatibility

<link href="" rel="stylesheet">
<script src=""></script>

3. Create the html for the navigation bar

<div id="navbar" style="position: fixed;"> <a class="brand">Navbar Example</a>
<li><a href="">Google.Com</a></li>
<li><a href="www.jQueryscript.Net">jQuery Plugins</a></li>

4. Call the plugin

<script type="text/javascript">
$(function() {
$("#navbar").scrollNav({"bootstrap_mobile": true});

Change log:


  • Fixed a scroll-top issue in mac-chrome

This awesome jQuery plugin is developed by dymk. For more Advanced Usages, please check the demo page or visit the official website.