Sticky when short, sliding when tall.
The sidebar stays fixed within the viewport when its content fits inside the available height. When the sidebar content is taller than the viewport, it moves with the reader until the top or bottom edge reaches the configured gap.
This pattern keeps navigation, filters, summaries, and calls to action reachable without cutting off long sidebar content on smaller screens.
Adjust the sidebar while the page stays open.
The range controls in the sidebar update the same data attributes used by the library. Each change takes effect immediately, so the sticky offset, lower limit, and responsive cutoff can be tested without a reload.
Sidebar height changes expose both modes.
The compact preset demonstrates standard sticky behavior for a sidebar that fits inside the viewport. The extended preset adds enough sidebar content to demonstrate the two-direction scrolling logic that makes this library useful for long menus and dense filter panels.
The element uses a stable top gap because every sidebar item can remain visible at once.
The element moves between top and bottom boundaries so hidden items can come into view while the page scrolls.
Designed for one active sticky sidebar.
The script initializes the first element matching data-sticky-sidebar or the legacy data-sticky="true" selector. A page that needs several independent sticky sidebars would need an extension that loops through every matching element and stores separate state for each one.
The demo keeps one active sidebar so every control maps to the library's current initialization model.