Skip to content

Conversation

rosieyohannan
Copy link
Contributor

@rosieyohannan rosieyohannan commented Sep 8, 2025

Fix: Table of contents scroll positioning behind fixed header

Problem

When users clicked on table of contents links, the target section would scroll to the top of the viewport but be hidden behind the sticky header, making the section title and content invisible.

Solution

  • Fixed JavaScript fragment jumper (ui/src/js/03-fragment-jumper.js):
  • Updated to correctly reference the header element instead of non-existent .toolbar
  • Added fallback for backward compatibility
  • Added CSS scroll margins (ui/src/css/doc.css):
  • Applied scroll-margin-top to all heading elements (h1-h6)
  • Used calculated value based on existing CSS variables: calc(var(--navbar-height) + var(--toolbar-height) + 1rem)
    Provides ~126px offset to account for sticky header height plus breathing room

Result

  • Table of contents navigation now properly scrolls sections into view below the header
  • Works for both desktop sidebar TOC and mobile/tablet embedded TOC
  • Handles both JavaScript clicks and direct anchor link navigation
  • Uses existing CSS architecture for maintainability

@rosieyohannan rosieyohannan requested review from a team as code owners September 8, 2025 12:20
@rosieyohannan rosieyohannan merged commit 04dcf93 into main Sep 8, 2025
3 checks passed
@rosieyohannan rosieyohannan deleted the DOCSS-1902-fix-scroll branch September 8, 2025 13:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants