Skip to content

Navigation Highlight Mismatch (Scroll-spy Offset) #22741

Description

@keegoid-nr

How can we make our docs better?

  • Is something confusing? Yes, the right-hand navigation ("On this page") highlights the wrong section when navigating to the bottom of the page.
  • Is something inaccurate or missing? The active state of the navigation menu is inaccurate.

Description

There is a mismatch between the active section in the viewport and the highlighted item in the right-side navigation bar. This appears to be caused by a combination of section height and scroll-threshold logic.

This is related to #22663, which attempted to fix the issue unsuccessfully.

1. Bottom-of-page "Sticky" Highlight

When navigating to the end of the document (e.g., #otel_support or #videos), the RSS menu item is highlighted regardless of which section is actually at the top.

  • The Smoking Gun: If you expand the collapsible sections within "OpenTelemetry support," the vertical height of that section increases. Once the section is tall enough, the navigation menu correctly highlights "OpenTelemetry support." This confirms the logic fails when the section is too short to reach the top of the viewport due to the page ending.

2. Header Offset Mismatch

Clicking Support hours scrolls the page to the correct heading, but the navigation menu highlights Support resources instead.

Steps to Reproduce

  1. Navigate to Global technical support offerings.
  2. Click OpenTelemetry support in the right nav.
    • Observation: "RSS" is highlighted.
  3. Expand a collapsible item under "OpenTelemetry support."
    • Observation: The highlight correctly jumps to "OpenTelemetry support."
  4. Click Support hours.
    • Observation: Page scrolls to the heading, but "Support resources" is highlighted.

Suggested Fix

  • Scroll-spy Threshold: Adjust the rootMargin in the Intersection Observer logic to better account for the header offset and short sections.
  • Padding: Add a larger padding-bottom or margin-bottom to the bottom of the article content to allow the final sections (Otel, Videos) to scroll high enough to trigger the "active" state without requiring the sections to be expanded.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

buga bug or issueengissues related to site functionality that requires engineering

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions