jQuery Plugin To Make Element Fixed Relative To Parent - JStick

File Size: 15.4 KB
Views Total: 1930
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

3. The JavaScript to active the plugin.

  parent: $('#sidebar')

4. Specify the distance from the top/bottom of the screen when the element is fixed.

  offsetTop: 0,
  offsetBottom: 0

5. Events available.

  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.