Skip to content

Bento & Layout

Sticky Sidebar + Scrolling Content

Pinned sidebar with its own internal scroll next to a scrolling main content column, desktop only.

SubscriptionIncluded with the Velocity Components subscription.
$velocityx add sticky-sidebar-layout
Props & docs

Needs a licence key — subscribe here, then velocityx loginonce.

AstroReactTailwind CSSNew

Sticky Sidebar + Scrolling Content

Sticky Sidebar + Scrolling Content

Live preview of the Sticky Sidebar + Scrolling Content component

Getting started

Section 1 of the scrolling docs body — the sidebar stays pinned at a 16px offset while this column scrolls underneath it.

Section 2 of the scrolling docs body — the sidebar stays pinned at a 16px offset while this column scrolls underneath it.

Section 3 of the scrolling docs body — the sidebar stays pinned at a 16px offset while this column scrolls underneath it.

Section 4 of the scrolling docs body — the sidebar stays pinned at a 16px offset while this column scrolls underneath it.

The code ships with Velocity.

Every component's full source — copy-paste ready, yours to edit — comes with any Velocity package. Buy once, own the code forever.

Get Velocity X — from $1,250 See all packages →

Using the Sticky Sidebar + Scrolling Content component

Every Velocity component is plain Astro or React markup styled with Tailwind utility classes. There is no proprietary runtime and no design-system wrapper to adopt — the component inherits whatever colour and type tokens your project already defines.

Read the component docs All 589 components

More Bento & Layout components

Browse all →

Three-Column Feature Row

Classic three-feature row that collapses to two then one column per breakpoint.

Masonry Column Layout

Pinterest-style masonry grid using native CSS multi-column layout with break-inside-avoid, zero JS.

Auto-Fit Responsive Card Grid

Breakpoint-free responsive card grid using CSS grid auto-fit/minmax, column count is purely a function of container width.

Aspect-Ratio Media Box

Reserves a stable aspect ratio for media to prevent layout shift, using the native CSS aspect-ratio property.

Stack Primitive

Vertical rhythm primitive that spaces children with flex gap instead of margin-stacking.

Cluster Primitive

Horizontal wrapping group primitive for tag lists, pills, and button groups using flex-wrap plus gap.