Background

Even when it's not supposed to show because the user has not scrolled that far, the sticky header element already exists (for keyboard tabbing, for visits with #toc anchor, and for getting its size), but has a 0 opacity.
However... it is still there, can be interacted with, and interferes with whatever is below it: clicking the mobile top-left hamburger menu icon actually triggers the TOC, because that button is (invisibly) on top of it.
That obviously shouldn't happen.

The screen recording shows the z-index issue: when users tap/click the mobile hamburger menu icon, the invisible TOC toggle button layered on top captures the interaction instead.

Acceptance Criteria

• The sticky header cannot intercept clicks meant for elements beneath its position