Smart And Performant Sticky Sidebar Plugin For jQuery

Smart And Performant Sticky Sidebar Plugin For jQuery
File Size: 33.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

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
});

Change log:

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.