jQuery Plugin To Fix Elements Within Relative Parent - Follower

Follower is a really simple jQuery sticky element plugin that makes any element fixed relative to its parent container. Fully responsive and mobile compatible.

How to use it:

1. Add references to jQuery library, follower.css and follower.js into the html page.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<link rel="stylesheet" href="follower.css">
<script src="follower.js"></script>

2. Assume that you have a widget to be fixed within the sidebar.

<div class="sidebar">
  <div id="widget" class="rect">
    ...
  </div>
</div>

3. Just call the function and the plugin will take care of the rest.

$('#widget').follower();

4. Note that if there were more than one follower, they must be absolute or fixed positioned by default.

.rect {
  position: absolute;
  top:0;
  ...
}

5. Default configuration options.

$('#widget').follower({

  // center content in the middle of container
  center: false, 

  // padding top when scrolling
  padding: 0, 

  // in px. Set a max value for stop following
  breakpoint: 0, 

  // e.g., '100%', '200px', '10em' 
  height : '' 

});

6. Methods.

// start following.
$('#widget').follower('play');

// stop following.
$('#widget').follower('stop');

// update
$('#widget').follower('update');

7. Events.

// Fires when element reaches top of container.
$('#widget').on('followerGetTop', function(){
  // ...
});

// Fires when element reaches bottom of container.
$('#widget').on('followerGetBottom', function(){
  // ...
});

// Fires when follower has been initialized.
$('#widget').on('followerReady', function(){
  // ...
});

// Fires when follower is turn on with play method.
$('#widget').on('followerPlay', function(){
  // ...
});

// Fires when follower is turn off with stop method.
$('#widget').on('followerStop', function(){
  // ...
});

//  Fires when window is resized.
$('#widget').on('followerResize', function(){
  // ...
});

Change log:

2016-07-13

• JS update

---

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