jQuery Plugin To Make Element Fixed Relative To Parent - JStick

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.