jQuery Plugin To Create Multiple Sticky Elements On The Page - jSticky

File Size: 10.1 KB
Views Total: 1043
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create Multiple Sticky Elements On The Page - jSticky

jSticky is a minimal jQuery plugin which provides a simple way to make anything (site navigation, sidebar widgets, etc) fixed at the top of the screen when you scroll past them.

How to use it:

1. Include the jquery.jsticky.js script after jQuery library but before you close the body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.jsticky.js"></script>

2. Call the function sticky() on any element you prefer.

$("#el").sticky();

3. Set the CSS z-index property of sticky element(s).

$("#el").sticky({
  zIndex: '999'
});

4. Specify how far down the sticky element is from the top.

$("#el").sticky({
  topSpacing: 0
});

5. Specify the stop point.

$("#el").sticky({
  // Id, class, or number value
  stopper: '.sticky-stopper'
});

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