facebook / facebook/docusaurus

Table of contents should scroll with content

Open
#9,904 7 comments 1 reaction 0 assignees View on GitHub
difficulty: advanced domain: theme feature
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
52

Description

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#issues).

### Prerequisites

- [X] I'm using the latest version of Docusaurus.
- [ ] I have tried the `npm run clear` or `yarn clear` command.
- [ ] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [ ] I have tried creating a repro with https://new.docusaurus.io.
- [ ] I have read the console error message carefully (if applicable).

### Description

When there's a big page with tons of sections, the "table of contents" sidebar does not really keep up with the user.

For example, here I have scrolled into the `table.reverse` section, but in the TOC sidebar, it is hardly visible:

![image](https://github.com/facebook/docusaurus/assets/63328889/3a58d5fc-8848-4e2f-8637-e06119f7f54e)

If I were to scroll further, the active section would be completely past the viewport on the sidebar.

### Reproducible demo

https://pluto-lang.org/docs/Runtime%20Environment/Global%20Reference

### Steps to reproduce

Big page.

### Expected behavior

The TOC sidebar scrolls with me.

### Actual behavior

It does not.

### Your environment

- Public source code: https://github.com/PlutoLang/plutolang.github.io
- Public site URL: https://pluto-lang.org/docs/Runtime%20Environment/Global%20Reference
- Docusaurus version used: 3.1.1
- Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 122.0.6261.70. Probably Node 22 since that's what GH actions should be using.
- Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 10

### Self-service

- [ ] I'd be willing to fix this bug myself.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.