Angular sticky sidebar

Angular sticky sidebar adapter over a tiny modern core. Both-edge pin, lock, CSS offsets. Current browsers only.

A short panel stays at the top of the window. A tall one rides with the page until the edge you scroll toward meets the screen.

Scrolling down pins the bottom of the panel to the bottom of the window. Scrolling up releases it and pins the top. Between those moments the panel just sits in its column.

Offsets come from CSS. Here the numbers write --sticky-aside-top and --sticky-aside-bottom. With Tailwind you pass top-16 md:top-24 instead.

Lock holds the panel at the window height where you turned it on. If the column leaves and the lock no longer fits, the panel returns inside the column.

The core does not know Vue, React, Svelte, Solid, Astro, or Angular. An adapter hands it two elements and listens to props.

Measurement is an invisible rail glued to the window between the top and bottom offsets, never taller than the panel. That is how the core knows whether the panel fits.

The listener hangs on window. Nested container scroll is out of scope for this version.

A fixed panel takes its width from the column. Otherwise it jumps the grid and stretches across the screen.

A short panel stays at the top of the window. A tall one rides with the page until the edge you scroll toward meets the screen.

Scrolling down pins the bottom of the panel to the bottom of the window. Scrolling up releases it and pins the top. Between those moments the panel just sits in its column.

Offsets come from CSS. Here the numbers write --sticky-aside-top and --sticky-aside-bottom. With Tailwind you pass top-16 md:top-24 instead.

Lock holds the panel at the window height where you turned it on. If the column leaves and the lock no longer fits, the panel returns inside the column.

The core does not know Vue, React, Svelte, Solid, Astro, or Angular. An adapter hands it two elements and listens to props.

Measurement is an invisible rail glued to the window between the top and bottom offsets, never taller than the panel. That is how the core knows whether the panel fits.

The listener hangs on window. Nested container scroll is out of scope for this version.

A fixed panel takes its width from the column. Otherwise it jumps the grid and stretches across the screen.

Taller than the window. Scroll both ways.

  1. A short panel stays at the top of the window. A tall one rides with the page until the edge you scroll toward meets the screen.
  2. Scrolling down pins the bottom of the panel to the bottom of the window. Scrolling up releases it and pins the top. Between those moments the panel just sits in its column.
  3. Offsets come from CSS. Here the numbers write --sticky-aside-top and --sticky-aside-bottom. With Tailwind you pass top-16 md:top-24 instead.
  4. Lock holds the panel at the window height where you turned it on. If the column leaves and the lock no longer fits, the panel returns inside the column.
  5. The core does not know Vue, React, Svelte, Solid, Astro, or Angular. An adapter hands it two elements and listens to props.
  6. Measurement is an invisible rail glued to the window between the top and bottom offsets, never taller than the panel. That is how the core knows whether the panel fits.
  7. The listener hangs on window. Nested container scroll is out of scope for this version.
  8. A fixed panel takes its width from the column. Otherwise it jumps the grid and stretches across the screen.