Theia Sticky Sidebar support fixed on the top or bottom when you scroll - Jquery Plugin

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..


1. Basic usage:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" 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.
Reactions

Post a Comment

0 Comments