jQuery Plugin To Stick An Element Within A Specified Container - Sticky-Element

Just another jQuery sticky element plugin which makes any element sticky with a smooth scrolling effect while scrolling the webpage. Supports responsive web layout where the plugin will auto update the boundaries of the container whenever the browser window is resized.

How to use it:

1. To use this plugin, you have to load the JavaScript file jquery.stickyelement.min.js after jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.stickyelement.js"></script>

2. Call the function to make the element 'sidebar' sticky within a specified container named 'container'.

$('.sidebar').sticky('.container');

3. Customize the smooth animation when the sticky element scrolls with the webpage.

$('.sidebar').sticky('.container',{

  // uses CSS3 transitions
  useTransition:true,

  // uses jQuery animate()
  animate:true,

  // animation speed
  animTime:200,

  // animation delay
  animDelay:300,

  // Offset the sticky element
  offset: 0
  
});

4. API methods.

// Updates the position and boundaries of the element
$('.sidebar').sticky('update');

// Toggles whether the element will move based off the scroll position
$('.sidebar').sticky('toggleFreeze');

// Updates the top and bottom boundaries of the element
$('.sidebar').sticky('setBoundaries');

// Manually move the element to the scroll position within its parent boundaries (useful if the element is frozen)
$('.sidebar').sticky('moveIt');

5. Events.

var mySticky = $('.sidebar').sticky('.container');

// Fired when the sticky element is created and ready to move
mySticky.on( "sticky-created", function() {
  // do something
});

// Fired when the element's update method is called to update boundaries
mySticky.on( "sticky-update", function() {
  // do something
});

// Fired when the element reaches the top of it's container
mySticky.on( "sticky-hit-top", function() {
  // do something
});

// Fired when the element reaches the bottom of it's container
mySticky.on( "sticky-hit-bottom", function() {
  // do something
});

// Fired when the element is frozen
mySticky.on( "sticky-frozen", function() {
  // do something
});

// Fired when the element is unfrozen
mySticky.on( "sticky-unfrozen", function() {
  // do something
});

Change log:

2017-11-01

• Adds example for using events
• Cleans up linting
• Add CircleCI config

2017-02-04

• Remove animation frame

2017-02-02

• Use animationframe on scroll

2016-08-19

• Add offset option

2016-07-15

• fixed for firefox

---

This awesome jQuery plugin is developed by EnzoMartin. For more Advanced Usages, please check the demo page or visit the official website.