Stick Elements To The Top Of Their Container - Proper stickyBar

Proper stickyBar is a highly customizable jQuery Sticky plugin that is useful for developers who want to make their site navigation or sidebar widgets sticky on page scroll.

The plugin uses the window scroll event to detect the position of your elements and applies CSS position:fixed property to them once they're scrolled into view.

How to use it:

1. Download the plugin and place the properStickyBar.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/properStickyBar.js"></script>

2. Call the function on the elemnt to make it sticky within its parent container.

$(function(){
  var stickyInstance = new stickySideBar($('nav'));
});

3. You can also specify the container within which the element should be fixed.

var stickyInstance = new stickySideBar($('nav'),{
    parentElementClass: '.section'
});

4. Override the default CSS classes when the element is sticky.

var stickyInstance = new stickySideBar($('nav'),{

    // default wrapping class
    wrappClass: 'sticked',

    // default active class
    activeStickyClass: 'is-sticked'

});

5. Override the CSS class of the sticky element when it reaches the bottom of the container.

var stickyInstance = new stickySideBar($('nav'),{
    activeBottomClass: 'is-bottom'
});

6. Set the width of the element when getting stuck.

var stickyInstance = new stickySideBar($('nav'),{
    width: '600'
});

7. Set the top offset of the sticky element.

var stickyInstance = new stickySideBar($('nav'),{
    top: 70
});

8. Determine whether to disable the plugin on mobile. Default: true.

var stickyInstance = new stickySideBar($('nav'),{
    disableOnMobile: false
});

9. API methods.

// update
stickyInstance.updateSticky();

// destroy
stickyInstance.destroy();

---

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