Create A Facebook Like Sticky Sidebar – simple-sticky-sidebar.js

Preview:

Description:

simple-sticky-sidebar.js is a blazing fast JavaScript Sticky Sidebar library which makes your sidebar stick to the bottom and top as you scroll down or up the web page.

How to use it:

Create a sidebar for your webpage.

<div class="sidebar">
  <div class="sidebar-inner">
    <div class="widget">Widget Here</div>
    <div class="widget">Widget Here</div>
    <div class="widget">Widget Here</div>
    <div class="widget">Widget Here</div>
    <div class="widget">Widget Here</div>
    <div class="widget">Widget Here</div>
    <div class="widget">Widget Here</div>
    <div class="widget">Widget Here</div>
    <div class="widget">Widget Here</div>
  </div>
</div>

Include the JavaScript file ‘simple-sticky-sidebar.js’ at the bottom of the webpage.

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

Make the sidebar’s inner content absolutely positioned.

.sidebar{
  position: relative;
  height: 100%;
}
.sidebar-inner {
  width: 100%;
  position: absolute;
}

Initialize the sticky sidebar.

simpleStickySidebar('.sidebar-inner', {
  container: '.sidebar'
});

Set the top and bottom offsets when the sidebar is stuck.

simpleStickySidebar('.sidebar-inner', {
  container: '.sidebar',
  topSpace: 20
  bottomSpace : 20
});

Changelog:

10/25/2018

• Fix when the height of the sidebar is dynamically changed