#Follower JQuery Plugin
This plugin makes an element sticky, so it follows you when you are scrolling.
When it reaches the bottom of the top of its container, it automatically stop following.
Demos
https://rawgit.com/aewebsolutions/follower/master/demos/follower.html
Installation
Include JQuery js and plugin’s css and js files in your HTML code.
<script src="/lib/jquery.js"></script> <link rel="stylesheet" href="/dist/follower.min.css" type="text/css" /> <script src="/dist/follower.min.js"></script> Usage
Wait until document is ready. Then, call plugin.
$(document).ready(function(){ $('#your_element').follower(); }); Include a relative positioned parent if you want to delimit following.
<div style="position: relative"> <div id="your_element">Your sticky element</div> </div> Code examples
$('#element-1').follower({ padding : 20 }); $('#element-2').follower({ height: '100%' }); $('#element-3').follower({ height: '100%', center : true }); $('#element-4').follower(); $('#element-4').on('followerGetBottom', function(){ console.log('#demo-4 has reached the bottom of container') }); $('#element-4').on('followerGetTop', function(){ console.log('#demo-4 has reached the top of container') }); Options
| Name | Type | Default | Description |
|---|---|---|---|
| center | boolean | false | Center content in the middle of a container |
| height | number|string | null | Height of the element. It takes original value by default. Percentage values refers to screen height |
| padding | number | 0 | space between top of the screen and element |
| breakpoint | number | 0 | Set a width value for stop following. E.g., '100%', '200px', '10em'. |
Public Methods
| Method | Params | Return | Description |
|---|---|---|---|
| update | void | void | Updates position of follower. |
| start | void | void | Starts following |
| stop | void | void | Stops following |
| close | callback | void | Detaches follower and stop following |
| instance | void | object | Returns the plugin instance |
Events
| Event | Params | Description |
|---|---|---|
| followerGetTop | event | Fires when element reaches top of container. |
| followerGetBottom | event | Fires when element reaches bottom of container. |
| followerReady | event, instance | Fires when follower has been initialized. |
| followerPlay | event, instance | Fires when follower is turn on with play method. |
| followerStop | event, instance | Fires when follower is turn off with stop method. |
| followerResize | event | Fires when window is resized. |
