jQuery Plugin To Make Any DOM Elements Sticky In View - positionSticky
File Size: | 341 KB |
---|---|
Views Total: | 495 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
positionSticky is a small jQuery plugin used to make any Html elements always stay visible as you scroll down the page. Please check demos
folder for more examples.
Basic Usage:
1. Include jQuery library and the positionSticky plugin at the bottom of your Html page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="dist/jQuery.positionSticky.js"></script>
2. Create an Html element that will be sticky at the top of your web page while scrolling.
<h2 class="sticky">Demo</h2>
3. Call the plugin on the element and done.
jQuery('.sticky').positionSticky();
4. Available options.
OffsetTop
: Sets the distance that the sticky element will have from the top of viewport when it becomes sticky.OffsetBottom
: Sets the distance that the sticky element will have from the bottom of its container when it is positioned absolutely.ElementWidth
: Applies element's computed width to its inline styling so that when the element is positioned absolutely or fixed it doesn't lose its shape.
Change log:
V1.1.0 (2014-08-11):
This awesome jQuery plugin is developed by katranci. For more Advanced Usages, please check the demo page or visit the official website.