developer.chrome.com icon indicating copy to clipboard operation
developer.chrome.com copied to clipboard

Show TOC in sidebar while scrolling

Open rviscomi opened this issue 2 years ago • 1 comments

Is your feature request related to a problem? Please describe. While scrolling through a long page like product documentation, it's hard to jump between sections given that the table of contents (TOC) is only available at the top of the page.

Describe the solution you'd like The side bar is currently used for related pages for the same project, but beyond a certain scroll position the space is blank and unused. It might be a nice compromise to pin the page TOC in the side bar after the other content scrolls away.

Relatedly, the Home/Docs/Blog/Articles navigation icons and links could also be sticky so that they're visible regardless of scroll position.

The pinned TOC is similar to how docs were presented on developers.google.com, for example: https://developers.google.com/web/tools/chrome-user-experience-report/

Describe alternatives you've considered A fixed position TOC button that is always present in the viewport. Clicking it expands into the full, scrollable TOC.

Additional context image

image

rviscomi avatar Jun 27 '22 17:06 rviscomi

The TOC will pin to the right when a media query that's keyed on the viewport min-width: 992px is met.

Pinning the TOC to the left when the viewport is smaller, underneath the "other" TOC, is an interesting idea.

CC: @devnook and @rachelandrew

jeffposnick avatar Jun 27 '22 17:06 jeffposnick