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.
Originally Published Aug 19 2020, updated Mar 12 2023
10 Best Sticky Sidebar Plugins:
Table of contents:
Best jQuery Sticky Sidebar Plugins
Content Sticky on Scroll with jQuery - Stickem
A usefull jQuery Plugin for Making contents sticky as you scroll, to a point.
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.
Highly Customizable jQuery Sticky Element Plugin - hc-sticky
A simple, responsive, cross-browser jQuery & Vanilla JS plugin which makes any block elements (e.g. navigation menu, sidebar) floating / fixed when scrolling, with lots of customization options and API.
jQuery Contained Sticky Sidebar Plugin - stickyMojo
A lightweight jQuery plugin for creating a Contained Sticky Sidebar on your webpage. It is fast, flexible and compatible with Firefox, Chrome, Safari, and IE8+.
Responsive Customizable Sticky Anything Plugin - jQuery Sticky-Anything
A simple yet highly customizable jQuery plugin that makes anything (e.g. header navigation, sidebar widgets, etc) sticky until a specific element (typically page footer element) is scrolled into view.
Best Vanilla JS Sticky Sidebar Plugins
Stick Sidebar Widgets To The Top Until Reaching The Bottom - sticksy
Make Multiple Elements Sticky When User Scrolls – Stuck.js