10 Best Sticky Sidebar Plugins In JavaScript

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:

• jQuery Sticky Sidebar Plugins
• Vanilla JS Sticky Sidebar Plugins

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.

[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.

[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.

[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.

[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.

[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.

[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.

[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.

[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.

[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.

[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:

• 10 Best Sticky Header Navigation Systems In JavaScript