Improve Blog Post Navigation with Sticky Sidebar Table of Contents

[absolutechy]

Describe the Issue

Currently, the Table of Contents on the blog details page is positioned at the top of the article. When a user scrolls down to read the content, the ToC disappears from the viewport. This forces users to scroll all the way back to the top if they wish to jump to a different section, leading to a poor navigation experience on long-form posts.

We need to transition the ToC from a static top element to a sticky sidebar component that remains visible and accessible during the entire reading experience.

Affected Page

https://www.freecodecamp.org/news/build-a-real-time-intrusion-detection-system-with-python/

Steps to Reproduce

Navigate to any published blog post detail page.

Locate the "Table of Contents" section at the beginning of the article.

Scroll down to the middle or end of the blog post.

Observation: The Table of Contents is no longer visible, and there is no quick way to navigate between headings without manual scrolling.

Expected behavior

Layout: On desktop screens, the Table of Contents should be moved to a sidebar (left or right of the main content).

Stickiness: As the user scrolls, the ToC should stay fixed within the viewport (using position: sticky).

Active State: (Optional but recommended) The current section being read should be highlighted in the sidebar ToC.

Responsiveness: On mobile devices, the ToC should either remain at the top or be tucked into a collapsible floating action button (FAB) to save screen real estate.

Screenshots

System

• Device: [ Laptop ]
• OS: [Windows 11]
• Browser: [Edge]

Additional context

No response

[MostafaElsehy]

This is a great UI enhancement! If the core team approves this layout change, I would love to work on implementing it.

[majestic-owl448]

At this time the table of content is just part of the article, there isn't any table of content component, it may not even be possible to implement with the current setup