Smart And Performant Sticky Sidebar Plugin For jQuery

A simple, performance-focused jQuery sticky sidebar plugin that smartly makes one or multiple sidebars sticky on vertical page scrolling, relative to their parent containers. Heavily based on requestAnimationFrame function and CSS3 will-change & transform properties.

jQuery Sticky Sidebar can also be implemented in pure JavaScript. Read the doc here.

Install it via package managers:

# NPM
$ npm install sticky-sidebar

# Bower
$ bower install sticky-sidebar

Basic usage:

1. Include the latest version of jQuery library and the jQuery Sticky Sidebar plugin's script on the webpage.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/sticky-sidebar.min.js"></script>

2. Call the function on the target sidebar and specify the CSS selectors of its inner/outer containers.

$('#sidebar').stickySidebar({
  containerSelector: '.container',
  innerWrapperClass: 'sidebar__inner'
});

3. You're also allowed to initialize the sticky sidebar via HTML data attribute as this:

<div class="container" data-sticky-sidebar-container>
  <div class="sidebar" data-sticky-sidebar>
    <!-- Content Goes Here -->
  </div>
  <div class="content">
    <!-- Content Goes Here -->
  </div>
</div>  

4. All possible plugin options which can be passed via either JavaScript or html HTML data attributes:

$('#sidebar').stickySidebar({
  /**
   * Additional top spacing of the element when it becomes sticky.
   * @type {Numeric|Function}
   */
  topSpacing: 0,

  /**
   * Additional bottom spacing of the element when it becomes sticky.
   * @type {Numeric|Function}
   */
  bottomSpacing: 0,

  /**
   * Container sidebar selector to know what the beginning and end of sticky element.
   * @type {String|False}
   */
  containerSelector: false,

  /**
   * Wrapper class of sticky sidebar.
   * @type {String}
   */
  innerWrapperClass: 'inner-wrapper-sticky',

  /**
   * The name of CSS class to apply to elements when they have become stuck.
   * @type {String}
   */
  stickyClass: 'is-affixed',

  /**
   * Detect when sidebar and its container change height so re-calculate their dimensions.
   * @type {Boolean}
   */
  resizeSensor: true,

  /**
   * The sidebar returns to its normal position if its width below this value.
   * @type {Numeric}
   */
  minWidth: false
});

<!-- Via Data Attributes -->
<div class="container" data-sticky-sidebar-container>
  <div class="sidebar" data-sticky-sidebar data-top-spacing="50">
    <!-- Content Goes Here -->
  </div>
  <div class="content">
    <!-- Content Goes Here -->
  </div>
</div>  

5. Event listeners available.

$('#sidebar').on('initialize.sticky', function(){
   // before the sticky sidebar plugin has been initialized
});

$('#sidebar').on('initialized.sticky', function(){
   // after the sticky sidebar plugin has been initialized
});

$('#sidebar').on('affix-top.sticky', function(){
   // before the element has been affixed top of viewport
});

$('#sidebar').on('affixed-top.sticky', function(){
   // after the element has been affixed top of viewport
});

$('#sidebar').on('affix-bottom.sticky', function(){
   // before the element has been affixed bottom of viewport
});

$('#sidebar').on('affixed-bottom.sticky', function(){
   // after the element has been affixed bottom of viewport
});

$('#sidebar').on('affix.container-bottom.sticky', function(){
   // before the element has been affixed bottom of container
});

$('#sidebar').on('affixed.container-bottom.sticky', function(){
   // after the element has been affixed bottom of container
});

$('#sidebar').on('affix.unbottom.sticky.sticky', function(){
   // before the element is no longer bottomed out
});

$('#sidebar').on('affixed.unbottom.sticky', function(){
   // after the element is no longer bottomed out
});

$('#sidebar').on('affix.static.sticky', function(){
   // before the element has been returned to its position
});

$('#sidebar').on('affixed.static.sticky', function(){
   // after the element has been returned to its position
});

$('#sidebar').on('recalcDimenstions.sticky', function(){
   // Trigger this event will cause force to re-calculate all cached dimentions of sticky sidebar plugin
});

Changelog:

2018-03-15

• Rebuild

2018-02-03

• v3.3.1: Fix bug remove events listener on IE versions; Fix insure getAffixType returns STATIC affix type when scrolling up and down

2017-11-02

• v3.3

2017-10-08

• v3.2

2017-09-20

• Fix wrong container inspection

2017-09-07

• v2.0.1: bugfix

2017-06-17

• Remove requestAnimationFrame
• Replace innerWrapSelector to innerWrapperSelector

2017-06-04

• Fixed: Trigger sensor size on the same affix type.

2017-05-30

• Remove dot prefix on events namespace.

About Author:

Author: Ahmed Bouhuolia

Website: https://abouolia.github.io/sticky-sidebar/

---

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