Why Does My Product-Ad Link Reach the Correct Section but Hide Its Heading Behind a Sticky Header?

Confirm that the fragment targets the intended content

Begin with the exact advertised URL, including its fragment identifier. Open it in a fresh browser context and check whether the intended element exists and whether the page scrolls toward it.

If the destination opens the wrong page or the target ID is missing, repair the URL or page markup first. A CSS offset cannot fix an incorrect fragment.

If the correct section appears but its heading sits underneath a sticky header, inspect the header's actual height and whether the page scrolls in the document viewport or inside a nested scrolling container.

Repeat the observation on mobile and desktop. A responsive header may change height, become sticky only after scrolling or expand when navigation controls open. A hardcoded offset that fits one viewport may be wrong in another.

Choose the appropriate documented scroll offset

MDN documents scroll-margin-top as an outset applied to an individual target's scroll snap area. This can provide space above a heading when it is brought into view.

MDN also documents scroll-padding-top for defining an optimal viewing region inside a scrolling container. The two properties apply at different levels: target versus container.

Ask the developer to identify which element scrolls and which element is the destination. Test the offset in the actual layout instead of adding empty paragraphs or invisible duplicate headings to manipulate position.

For example, a target heading might receive an offset corresponding to the actual sticky-header clearance. That value must come from the tested layout, not a universal pixel recommendation.

Also inspect any JavaScript-driven scrolling. A custom script that sets an absolute scroll position may not behave like native fragment navigation and should be investigated on its own terms.

Hypothetical dimensions-link arrival

Hypothetical illustration—not an executed browser test: a fictional travel-bag advertisement links to /products/travel-bag#dimensions. The target heading exists, and the page is stipulated to scroll to the correct section. A sticky navigation bar covers the heading's first line.

The developer's proposed repair is to apply an appropriate target-level scroll margin or container-level scroll padding, then test the actual mobile and desktop header states.

If the heading becomes visible but keyboard focus remains on the advertisement's originating link or another unexpected control, that is a separate navigation-context observation. The team should inspect focus behavior rather than declaring the fragment accessible solely because the heading is visible.

If the target is already visible and the dimensions are missing, the problem belongs to content completeness, not scroll offset.

Test the whole arrival task after repair

Reload the direct fragment URL, follow the same link from within the page and repeat after changing viewport size. Record whether the target heading and the first relevant content are visible without requiring an unexplained manual scroll.

Check keyboard navigation and the reading order. A visual position correction should not obscure the focused element or cause the reader to lose context.

Verify that the dimensions themselves are accurate and correspond to the advertised product variant. Scroll positioning does not validate measurements or purchase eligibility.

If the page uses smooth scrolling, test whether the user can still locate the destination promptly and whether any reduced-motion preference is respected by the actual implementation.

Close the issue when the correct target is reached, its heading remains visible in supported layouts, and the visitor can continue the intended task. This is an external storefront implementation check, not a CartVisual feature.

Record your own observations

The filled rows are illustrative examples. Use the blank row for your own files and observations.

Download the editable CSV worksheet

What the references establish

• MDN — scroll-margin-top: Directly documents the target-level CSS scroll margin and its effect on the scroll snap area.
• MDN — scroll-padding-top: Documents the scrolling-container-level padding mechanism; actual browser and layout behavior must be tested.