Stick Elements To A Certain Container - stickOnScroll

Yet another jQuery Sticky On Scroll plugin which helps you quickly create sticky header navigation and/or sidebar widgets on the webpage.

The plugin detects the scroll event, loops through a list of elements that need to be stuck and then makes the matched element(s) stick to the top of the viewport (or a specific container, e.g. parent container).

How to use it:

1. To get started, include both jQuery library and the stickOnScroll plugin at the bottom of the web page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.stickOnScroll.js"></script>

2. Attach the function stickOnScroll to the desired element. The data-stickyType attribute is used to specify the sticky type:

• window: stick the element to the top of the webpage.
• element: stick the element to a given container element. Use data-stickonscroll attribute to specify the target container element.

<div id="menu" data-stickyType="window">
  ... content here ...
</div>

<div id="menu" data-stickonscroll="menu" data-stickyType="element">
  ... content here ...
</div>

$("#menu").stickOnScroll();

3. Set the top/bottom offset for sticky elements.

$("#menu").stickOnScroll({
  topOffset: 0,
  bottomOffset: 5
});

4. Customize the footer element at which point the plugin disables the Sticky behavior.

$("#menu").stickOnScroll({
  footerElement:  $("footer")
});

5. Specify the element in which you want to track the scroll event.

$("#menu").stickOnScroll({
  viewport: window
});

6. Customize the CSS class which will be appended to the Sticky element.

$("#menu").stickOnScroll({
  stickClass: 'stickOnScroll-on'
});

7. Determine whether or not to automatically set the height of the parent element.

$("#menu").stickOnScroll({
  setParentOnStick: false
});

8. Determine whether or not to automatically maintain the width when the element become Sticky.

$("#menu").stickOnScroll({
  setWidthOnStick: false
});

9. Available callback functions which will be triggered when the element gets/lost Sticky.

$("#menu").stickOnScroll({
  onStick: function(el){
    // do something
  },
  onUnStick: function(el){
    // do something
  }
});

---

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