jQuery Plugin To Create Customizable Fixed Html Elements - stkr

File Size: 115 KB
Views Total: 462
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create Customizable Fixed Html Elements - stkr

Stkr is a simple yet highly customizable jQuery plugin which allows you to make any Html elements sticky on the web page when you scroll down.

Features:

  • Custom start & 'unstick' points.
  • The html elements can be positioned anywhere on your web page.
  • Fade in/out effects as the Html elements come into view.

Basic Usage:

1. Load the jQuery Javascript library and the jQuery stkr plugin's script at the end of your web page.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/stkr.min.js"></script>

2. Call the plugin on the target element you wish to make it sticky on your web page.

$('#target-element').stkr();

3. Available options.

// start point
// When the user scrolls to this point, 
// the sticky element becomes fixed on the page.
startSticky: 'body',

// end point
endSticky: null,

// 'top-left', 'top-right', 'bottom-left', 'bottom-right', or 'custom'
stickyPosition: 'top-left',

// position options
top: null,
left: null,
bottom: null,
right: null,

// offsets the point at which the element becomes fixed on the page
offsetStick: 0,

// offsets the point at which the element is no longer fixed on the page.
offsetUnstick: 0,

// horizontal or vertical
horizontal: false,

// toggle the visibility of the fixed element
toggleVisibility: false,

// fade in/fade out effects
toggleFade: false

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