jQuery Plugin To Keep Element Fixed When Scrolling - Smart Sticky

jQuery Plugin To Keep Element Fixed When Scrolling - Smart Sticky
File Size: 5.02 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Smart Sticky is a very small jQuery plugin for creating sticky element that allows you to pin any html elements to the top of your document.

How to use it:

1. Load jQuery library and the jQuery smart sticky at the end of the document so the pages load faster.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.smart-sticky.js"></script>

2. Call the smartSticky() method on any matched elements to make them sticky when scrolling down.

$(function(){
  $('.sticky').smartSticky();
})

3. That's it. You can change the top offset in the scrollEnter() function.

function scrollEnter() {
  $element.css({
    'position': 'fixed',
    'top': 0, // --> '20px'
    'left': formerPosition.left,
    'right': 'auto',
    'bottom': 'auto',
    'margin-top': 0,
    'margin-left': 0,
    'margin-right': 0,
    'margin-bottom': 0
  });
}

Change log:

2015-09-24

  • Improve scroll behavior when we are after the last trigger

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