Problem

When users scroll through an article with collapsible sticky section headers, if a multi-line (taller) header scrolls behind a shorter (single-line) header, the taller header peeks through underneath during the sticky transition. This creates a distracting visual glitch and reduces clarity of which section is currently in view.

Steps to Reproduce

Visit an article with collapsible sticky section headers enabled (e.g., Swan Maiden).
Locate two adjacent section headers where:
The first header takes multiple lines
The following header is one line
Scroll so the taller header becomes sticky, then continue scrolling down into the next section.
Observe that the taller header visually bleeds through under the shorter sticky header.

Expected Behavior

While scrolling, only the current sticky header should be visible.
No part of previously sticky headers should remain visible underneath.

Actual Behavior

Taller section headers visually overlap and peek out underneath when scrolling past them.

Acceptance Criteria

A clean solution that ensures:

• Only one sticky header is visible at any time while scrolling
• No overlapping content appears during sticky transitions
• Behavior remains smooth and predictable regardless of header height

Suggested Implementation Notes

• A CSS-only solution is preferred if possible.
• One explorative idea discussed: automatically truncate headers to a single line while sticky to normalize height.
• JavaScript can be used if absolutely necessary, but should not introduce layout thrashing or excessive scroll listeners.