jQuery Plugin For Intelligent Sticky Sidebars - Theia Sticky Sidebar

The Theia Sticky Sidebar jQuery plugin allows to make your sidebar widgets be fixed on the top (or bottom) when you scroll past them. With support for ResizeSensor that automatically recalculates the sidebar's position when the screen size changes.

More features:

• Allows to be stuck to any containers (Default: parent container).
• Supports multiple sidebars in once.
• 3 sticky behaviors: modern, stick to top and stick to bottom.
• Mobile-friendly. Allows to disable the 'Sticky' when the screen size is smaller than a specific value.
• Compatible with any CSS framework such as Bootstrap, Foundation, etc...

Installation:

# NPM
$ npm install theia-sticky-sidebar

# Bower
$ bower install theia-sticky-sidebar

Basic usage:

1. Load the latest version of jQuery library and the Theia Sticky Sidebar plugin's script in your html document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/ResizeSensor.js"></script>
<script src="dist/theia-sticky-sidebar.js"></script>

2. Add the CSS class 'theiaStickySidebar' to sticky sidebars as follows:

<div class="leftSidebar">
  <div class="theiaStickySidebar">
    <div class="box">
      <h2>Left Sidebar</h2>
    </div>
  </div>
</div>

<div class="rightSidebar">
  <div class="theiaStickySidebar">
    <div class="box">
      <h2>Right Sidebar</h2>
    </div>
  </div>
</div>

3. Attach the plugin to the sidebars and we're done.

$('.leftSidebar, .rightSidebar').theiaStickySidebar();

4. Possible plugin options to customize the sticky sidebars.

$('.leftSidebar, .rightSidebar').theiaStickySidebar({

  // container element
  'containerSelector': '',

  // top/bottom margiin in pixels
  'additionalMarginTop': 0,
  'additionalMarginBottom': 0,

  // auto update height on window resize
  'updateSidebarHeight': true,

  // disable the plugin when the screen size is smaller than...
  'minWidth': 0,

  // disable the plugin on responsive layouts
  'disableOnResponsiveLayouts': true,

  // or 'stick-to-top', 'stick-to-bottom'
  'sidebarBehavior': 'modern',

  // or 'absolute'
  'defaultPosition': 'relative',

  // namespace
  'namespace': 'TSS'
  
});

---

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