Login

Sticky Sidebar for destop

Preview demo
Desktop
Mobile

Sticky Sidebar ⬆⬇ is a pure JavaScript plugin for making smart and high performance sticky sidebar, works with sidebar if it’s taller or shorter than the viewport, integrated with resize sensor to re-calculate the dimensions automatically when the size of sidebar or its container is changed, supports Brizycloud/wp and compatible with Firefox, Chrome, Safari, and IE9+.

Why sticky sidebar is awesome? It does not re-calculate all dimensions when scrolling, just neccessary dimensions. Super smooth without incurring scroll lag or jank and no page reflows. Integrated with resize sensor to re-calculate all dimensions of the plugin when the size of sidebar and its container is changed. It has event trigger on each affix type to hook your code under particular situations. Handle the sidebar when it is tall or too short compared to the rest of the container. Zero dependencies and super simple to setup.

* Watch the demo to understand how it works (Open the demo on your desktop)


This content has been hidden.

Please Donate or Complete Survey (advertisement) to unlock free.

Download demo

Insert the following code in the header or footer

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>


/* Sticky scroll is here */


<script>
/*-- sticky sidebar--*/
const postDetails = document.querySelector(".contain-details");
const postSidebar = document.querySelector(".my-sidebar");
const controller = new ScrollMagic.Controller();
const scene = new ScrollMagic.Scene({
 triggerElement: postSidebar,
 triggerHook: 0,
 duration: getDuration
}).addTo(controller);

if (window.matchMedia("(min-width: 768px)").matches) {
 scene.setPin(postSidebar, {pushFollowers: false});
}

window.addEventListener("resize", () => {
 if (window.matchMedia("(min-width: 768px)").matches) {
  scene.setPin(postSidebar, {pushFollowers: false});
 } else {
  scene.removePin(postSidebar, true);
 }
});

function getDuration() {
 return postDetails.offsetHeight - postSidebar.offsetHeight;
}
</script>
Download demo

How to use it

Download file demo.zip, upload to Brizy. Done (Then you can see the css code from here)

  1. Click download demo.zip
  2. To import, go to a page >> click on "add a new block" >> select "saved" tab >> click on "import new block" >> Upload your zip file >> Completed.
  3. Customize to your fancy. Watch the video tutorial here

*Note: License Pro is required for the functions to work

Key word:

How to make a sticky sidebar, How TO - Fixed Sidebar, Sticky for Sidebars


$5

Published by Philip

Future update

Lifetime support

Live chat - Setup support

Compatible with BrizyCloud & WP

Join premium membership to unlock all pages (no ads)