Two Direction Sticky Sidebar in Pure JavaScript

Two Direction Sticky Sidebar: a pure JavaScript utility that adds bi-directional sticky behavior to any sidebar element.

Key features:

• Tracks scroll direction and locks to the top or bottom of the viewport
• Configurable top and bottom viewport gaps via data attributes
• Mobile breakpoint support disables the effect on small screens
• Live attribute updates reconfigure the sidebar at runtime
• Frame-synced scroll handling for consistent visual performance

Add one attribute to your sidebar element and include the script. That's the full setup.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo