jQuery Plugin To Keep Element Fixed When Scrolling - Smart Sticky

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.