Scroll this panel — the toolbar above stays pinned to the top while the body below scrolls. The sticky-pin uses native CSS position: sticky against the nearest scrolling ancestor (this overflow:auto wrapper), so no JS scroll listener is needed and the behavior holds at any viewport.
For the sticky to work the toolbar's parent must be either a scrolling container (this wrapper) or the document root. Mounting a sticky toolbar inside a parent with overflow: hidden or a flex layout that constrains height will pin it against the wrong ancestor — opt out by setting :sticky="false" when the toolbar lives inside a non-scrolling card.
Filler content to demonstrate the scroll. Each paragraph adds vertical real estate that pushes the bottom of the panel beyond the visible viewport. The toolbar tracks the top boundary as the reader scrolls.
Use sticky toolbars for primary actions in long-form admin panels (Save / Discard for an edit screen, Filter / Sort for a long results list, Compose / Reply for a mail thread). Avoid for read-only contexts where the toolbar's affordances are unrelated to the body content.
Combine with density="compact" to minimize the height the sticky toolbar reserves at the top of the scrollable region — useful when vertical space is tight.
The sticky pin respects the container's top offset, so if the scrolling ancestor itself has padding-top, the toolbar pins below the padding rather than against the raw scroll edge.
More filler. The sticky should now be visibly anchored. Scroll back to the top to see the toolbar return to its document-flow position; the pinning is purely a scroll-position behavior, not a layout shift.
End of the scrollable body. The toolbar above is the last thing you see at the top regardless of how far down you scroll.