🐛 Bug: Inconsistent active state between sidebar navigation and content headings on blog pages

Describe the bug

On blog post pages, both content headings and the left sidebar allow in-page navigation.
However, the active/highlighted state becomes inconsistent when navigating between them.

Steps To Reproduce

1. Go to one of the JSON Schema blog pages
2. Click a content subheading (e.g., "JSON Data Guide") .Here the heading becomes highlighted (blue)
3. Click a sidebar item (e.g., "Performance Improvement")
4. Page scrolls correctly to the selected section
5. Sidebar item does not show an active state
6. Previously clicked content heading remains highlighted, even though it is no longer the current section

Expected Behavior

1. Only the currently active section should be highlighted
2. Sidebar and content headings highlights should stay in sync
3. Previous active highlights should be cleared when navigating via sidebar or scroll

Screenshots

Recording

https://github.com/user-attachments/assets/195b69e8-ce19-4218-8810-7b17fc324bcd

Device Information [optional]

- OS:
- Browser:
- version:

Are you working on this issue?

Yes

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

No

Start at the linked JSON Schema blog page and reproduce navigation between a content subheading and the left sidebar item. Inspect the page's active-section behavior while clicking and scrolling; done means only the current section is highlighted and sidebar and content-heading states remain synchronized.