🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Hidescroll.js is a tiny jQuery plugin which allows to hide the top navigation bar as you scroll down, however when you scroll up it would show it self again.

Navigation

Documentation

Hidescroll.js is jQuery plugin for hiding navbar on scrolling down and showing on scrolling up. It's all for the better user reading experience.

##Setup

###1. Include jQuery jQuery is the only dependency. Make sure to include it.

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

###2. Include Hidescroll.js

<script src="jquery.hidescroll.js"></script>

###3. Make necessary markup Link to slider stylesheet inside document head.

<link rel="stylesheet" href="css/style.css">

Make necessary markup for slider.

<div class="navbar"></div>

###4. Init Init our slider on default options ...

<script> 	$('.navbar').hidescroll(); </script>

… or with custom options

<script> 	$('.navbar').hidescroll({ 		offset: $('#header').height(), 	}); </script>

##Options Here is list of all available

Option Default Type Description
offset 0 int How far scroll distance (from top) navbar sticking has taken place
interval 250 int How often (in ms) check current scroll position and direction
stickClass is-stick string Class used on navbar stick
visibleClass is-visible string Class used on navbar stick visible
hiddenClass is-hidden string Class used on navbar stick hidden

##Changelog

1.0.1 / 29.09.2014

  • Changed state class names

1.0.0 / 10.08.2014

  • Plugin release

##License Glide is Copyright © 2013 Jędrzej Chałubek and is licensed under the terms of the MIT License.


You May Also Like