jQuery Plugin To Make Element Fixed Relative To Parent - JStick
File Size: | 15.4 KB |
---|---|
Views Total: | 1934 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

JStick is a really simple jQuery plugin that makes any element position fixed relative to its parent container as you scroll down the webpage. Powered by CSS3 2D transforms.
How to use it:
1. Load the latest version of jQuery and jQuery JStick plugin's script in your html file.
<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script> <script src="src/jquery.JStick.js"></script>
2. Assuming you have an element 'widget' which should be fixed within the parent container 'sidebar' as you scroll past it.
<div id="sidebar"> <div id="widget"></div> </div>
3. The JavaScript to active the plugin.
$("#widget").JStick({ parent: $('#sidebar') })
4. Specify the distance from the top/bottom of the screen when the element is fixed.
$("#widget").JStick({ offsetTop: 0, offsetBottom: 0 })
5. Events available.
$("#widget").JStick({ parent: $('#sidebar') }) .on('JStick:dockTop', function(){console.log('dock top')}) .on('JStick:undockTop', function(){console.log('undock top')}) .on('JStick:dockBottom', function(){console.log('dock Bottom')}) .on('JStick:undockBottom', function(){console.log('undock Bottom')})
This awesome jQuery plugin is developed by BrunoFenzl. For more Advanced Usages, please check the demo page or visit the official website.