jQuery Plugin To Make Any DOM Elements Sticky In View - positionSticky

File Size: 341 KB
Views Total: 483
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Make Any DOM Elements Sticky In View - positionSticky

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.