Prevent Sticky Headers From Hiding Anchor Targets

.release-action {
  scroll-margin-block-start: 0;
}

.release-action {
  scroll-margin-block-start: 64px;
}

Root cause

Sticky positioning keeps the header at the scrollport’s block-start edge without removing the underlying content from the document. A normal anchor or scrollIntoView() operation can align its target to that same edge. The target is technically inside the viewport but visually covered by authored content.

The regression is more serious when the target is an interactive control. A keyboard user can move focus to it while neither the control nor its focus indicator is visible. The recorded fixture focuses the action after positioning it so the overlap is measured rather than inferred.

Test every path that moves the scroll position

Activate the in-page link, focus the target directly, and approach the same control through forward and reverse keyboard navigation. Measure the sticky header’s block-end edge and the target’s block-start edge after each movement. A visible heading is not sufficient if the interactive target or its focus ring is still covered.

Repeat the sequence after the header wraps at a narrow breakpoint and at increased browser zoom. If more than one sticky layer can occupy the top edge, calculate the combined obstruction or manage one shared offset token. This makes the clearance follow the actual navigation system rather than a number copied into unrelated components.

When this fix is not enough

One fixed pixel offset may become wrong when the header wraps, changes size at a breakpoint, or includes a temporary notice. A shared custom property, scroll-padding-block-start on the scroll container, or unfixing the header at constrained heights can be more maintainable. Test forward and reverse keyboard navigation, browser zoom, and every sticky layer that can occupy the same edge.

Regression condition

At every recorded viewport, the failing target must have positive overlap with the sticky header after scroll positioning and focus. The fixed target must start below the header with zero overlap. Both states must keep zero page-level horizontal overflow.