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

Category: Javascript , Layout | October 25, 2018
Author:ismailfarooq
Views Total:2,469 views
Official Page:Go to website
Last Update:October 25, 2018
License:MIT

Preview:

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

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

You Might Be Interested In:


3 thoughts on “Create A Facebook Like Sticky Sidebar – simple-sticky-sidebar.js

  1. Aditya A

    Hi, thank you for the code. The problem is that, in my case I have footer and it is overlapping with that as bottom space is 20. If I increase bottom space, there is an unwanted white space is appearing. I need to give a condition that as soon as scrollTop reaches a certain height, bottom space must be changed. Can you help me with that?

    Thank You

    Reply
  2. John

    Hi, there is a bug, if you scroll all down and then up by let’s say half of page back, and than little bit down, left bar jump to bottom

    Reply

Leave a Reply