🐛 Bug: In-page navigation header stays visible while scrolling on mobile (Docs & Specification pages)

Describe the bug

• On mobile view, the in-page navigation header (the bar with the title like “Get started” and an arrow icon) does not behave correctly on the Docs and Specification pages.

• When this navigation panel is opened, the page content can still be scrolled, while the navigation header remains visible and partially overlaps the content. This results in an inconsistent and confusing UI experience.

Screencast:
https://github.com/user-attachments/assets/1475be3f-408a-431e-aeae-892d031b9e7f

Screenshots:

Steps To Reproduce

1. Go to https://json-schema.org/

2. Open the website in mobile view.

3. Navigate to a Docs or Specification page.

4. Tap on the top in-page navigation header (for example, “Get started”) to open the section list.

5. Scroll down / swipe up the page.

6. Notice that the page content scrolls while the navigation header remains visible.

Expected Behavior

When the in-page navigation panel is open in mobile view:

• It should cover the entire page, or

• Background page scrolling should be disabled.

The user should be able to scroll the navigation panel only, and the only way to return to the page content should be by closing the navigation panel.

This keeps the UI consistent and avoids content overlap.

Screenshots

Screencast:
https://github.com/user-attachments/assets/1475be3f-408a-431e-aeae-892d031b9e7f

Screenshots:

Device Information [optional]

- OS: Ubuntu
- Browser: Brave
- version: Latest

Are you working on this issue?

Yes

Do you think this work might require an [Architectural Decision Record (ADR)]? (significant or noteworthy)

No