Author: | ismailfarooq |
---|---|
Views Total: | 2,469 views |
Official Page: | Go to website |
Last Update: | October 25, 2018 |
License: | MIT |
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
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
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
It’s perfect, but I want the side towards right, how can I do that?