High Performance Sticky Sidebar In Pure JavaScript

Preview:

Description:

This is the vanilla JavaScript version of the sticky-sidebar plugin which provides the smart, high-performance sticky sidebars for your cross-browser websites.

Get it from NPM:

$ npm install sticky-sidebar

How to use it:

Include the requestAnimationFrame polyfill for legacy browsers (OPTIONAL):

<script src="rAF.js"></script>

Include the ResizeSensor.js to detect when sidebar or container is changed (OPTIONAL):

<script src="ResizeSensor.js"></script>

Include the main JavaScript file ‘sticky-sidebar.js’ right before the closing body tag.

<script src="sticky-sidebar.js"></script>

Create a sidebar inside the container as follows:

<div class="container">
  <div id="sidebar">
    <div class="sidebar__inner">
      <p>This is sticky column</p>
    </div>
  </div>
  <div id="content">
    main content here
  </div>    
</div>

Make the sidebar fixed within the container as you scroll down the web page.

new StickySidebar('#sidebar', {
    containerSelector: '.container',
    innerWrapperSelector: '.sidebar__inner'
});

All default configuration options.

/**
 * 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,
/**
 * Inner wrapper selector.
 * @type {String}
 */
innerWrapperSelector: '.inner-wrapper-sticky',
/**
 * The name of CSS class to apply to elements when they have become stuck.
 * @type {String|False}
 */
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

Event handlers.

instance.addEventListener('initialized.stickyBar', function(){
   // after the sticky sidebar plugin has been initialized
});
instance.addEventListener('affix.top.stickyBar', function(){
   // before the element has been affixed top of viewport
});
instance.addEventListener('affixed.top.stickyBar', function(){
   // after the element has been affixed top of viewport
});
instance.addEventListener('affix.bottom.stickyBar', function(){
   // before the element has been affixed bottom of viewport
});
instance.addEventListener('affixed.bottom.stickyBar', function(){
   // after the element has been affixed bottom of viewport
});
instance.addEventListener('affix.container-bottom.stickyBar', function(){
   // before the element has been affixed bottom of container
});
instance.addEventListener('affixed.container-bottom.stickyBar', function(){
   // after the element has been affixed bottom of container
});
instance.addEventListener('affix.unbottom.stickyBar', function(){
   // before the element is no longer bottomed out
});
instance.addEventListener('affixed.unbottom.stickyBar', function(){
   // after the element is no longer bottomed out
});
instance.addEventListener('affix.static.stickyBar', function(){
   // before the element has been returned to its position
});
instance.addEventListener('affixed.static.stickyBar', function(){
   // after the element has been returned to its position
});

Changelog:

07/13/2018

• Update