Stkr: Documentation

Getting Started

  1. Download stkr.zip from GitHub
  2. Transfer stkr.min.js from the plugin folder to your project folder
  3. Load jQuery CDN and stkr.min.js by inserting the following script tags immediately before your closing body tag:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script src="sticky.js"></script>
    Make sure your src attribute includes the correct path to the stkr.js file.
  4. Give the desired sticky element an ID.
    <img href="images/parachute.png" id="sticky">
    If you're including multiple sticky elements that will become fixed at different points on the web page, they should each have a distinct ID name.
    <img href="images/parachute.png" id="sticky1"><img href="images/cloud.png" id="sticky2"><img href="images/bird.png" id="sticky3">
  5. Call the stkr method, .stkr();, in your JavaScript file. If there are multiple sticky elements on the page, invoke a new jQuery function for each.
    $('#sticky1').stkr();$('#sticky2').stkr();$('#sticky3').stkr();

Default Settings

By default, the sticky element remains fixed on the top-left corner for the entire length of your web page, with its top and left properties set to 20px.

position: 'fixed',top: 20,left: 20

Customizable Settings

Contribute:

Fork on GitHub