10 Best Sticky Sidebar Plugins In JavaScript

by jQueryScript,

When you are running a website or blog, you might need to make a sidebar widget (like featured content, big sales, subscription form, social like box, and ads) stick to the side of your page.

In most cases, you can use CSS position: fixed or position: sticky property to make the whole sidebar stick to the side when the users scroll down or up the webpage:

Sticky Sidebar With Pure CSS:

See the Pen Sticky Sidebar With Pure CSS by iqq800 (@iqq800) on CodePen.

However, when you only need a block element in the sidebar to be fixed to the side of your page, the situation is a bit more complicated.

You might need JavaScript to keep track of the scroll event and fix a given element to the top while keeping the element stay within the sidebar until it reaches the bottom of the page.

This is why I decide to write this blog post and list here the 10 Best jQuery and Vanilla JavaScript solutions to help beginners quickly implement a sticky sidebar on the webpage.

10 Best Sticky Sidebar Plugins:

Table of contents:

Best jQuery Sticky Sidebar Plugins

Creating A Fixed Position Sidebar With jQuery Sticky Sidebar Plugin

Sticky Sidebar is a lightweight and super simple jQuery plugin for creating a sticky right (or left) sidebar that follows the user as the user scrolls down the page.

Creating A Fixed Position Sidebar With jQuery Sticky Sidebar Plugin

[Demo] [Download]


Create Sticky Floating Sidebar Ads with jQuery - Banner Scroll

Banner Scroll is a minimal jQuery script for making floating sidebar ads that stick to the side of the webpage when scrolling down or up.

Create Sticky Floating Sidebar Ads with jQuery - Banner Scroll

[Demo] [Download]


Smart And Performant Sticky Sidebar Plugin For jQuery

A simple, performance-focused jQuery sticky sidebar plugin that smartly makes one or multiple sidebars sticky on vertical page scrolling, relative to their parent containers.

Smart And Performant Sticky Sidebar Plugin For jQuery

[Demo] [Download]


jQuery Plugin For Intelligent Sticky Sidebars - Theia Sticky Sidebar

The Theia Sticky Sidebar jQuery plugin allows to make your sidebar widgets be fixed on the top (or bottom) when you scroll past them.

jQuery Plugin For Intelligent Sticky Sidebars - Theia Sticky Sidebar

[Demo] [Download]


jQuery Plugin For Creating Sticky Html Elements - Sticky Kit

Sticky Kit is a lightweight (~2kb minified) jQuery plugin for easily creating sticky html elements on your web page, such like fixed position header, footer, side bar, etc.

jQuery Plugin For Creating Sticky Html Elements - Sticky Kit

[Demo] [Download]


Best Vanilla JS Sticky Sidebar Plugins

Highly Customizable Sticky Element Plugin - hc-sticky

hc-sticky is a simple, responsive, cross-browser JavaScript plugin which makes any block elements (e.g. navigation menu, sidebar) floating / fixed when scrolling.

Highly Customizable jQuery Sticky Element Plugin - hc-sticky

[Demo] [Download]


Pure JavaScript Sticky Element Library – sticky-js

sticky-js is a small vanilla JavaScript library which makes DOM elements to be fix positioned relative to the whole page or its parent container.

Pure JavaScript Sticky Element Library – sticky-js

[Demo] [Download]


Make Multiple Elements Sticky When User Scrolls – Stuck.js

Stuck.js is a small JavaScript plugin that has the ability to make multiple stacked and sticky on page scroll.

Make Multiple Elements Sticky When User Scrolls – Stuck.js

[Demo] [Download]


Fix Element To The Top Within Its Parent Container – Bare-Bone-Affix

A barebone affix JavaScript plugin which fixes an element to the top until it reaches the bottom of its parent container.

Fix Element To The Top Within Its Parent Container – Bare-Bone-Affix

[Demo] [Download]


Make Anything Sticky On Scroll – floater

floater is a simple yet configurable JavaScript library to make any contents (for example header navigation, sidebar widgets) fixed at the top or bottom of the page when scrolling down or up.

Make Anything Sticky On Scroll – floater

[Demo] [Download]


More Resources:

Want more jQuery plugins or JavaScript libraries to create sticky sidebars on the web & mobile? Check out the jQuery Sticky and JavaScript Sticky sections.

Related Resources: