--- title: "How to Make a Sticky Table of Contents in WordPress?" url: https://nexterwp.com/docs/make-a-sticky-table-of-contents-in-wordpress/ date: 2024-12-03 modified: 2026-09-15 lang: en author: "Aditya Sharma" description: "A table of contents at the top of a long post is useful for about four seconds. Making it stick keeps the outline beside the reader the whole way down,..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Make-a-Sticky-Table-of-Contents-in-WordPress_-1024x519.jpg word_count: 612 --- # How to Make a Sticky Table of Contents in WordPress? ## Key Takeaways - Nexter Blocks Table of Contents block creates a sticky table of contents in WordPress for long pages. - Position Fixed toggle in the Layout tab keeps the table of contents fixed while visitors scroll. - Offset section sets a top offset value in pixels for responsive devices, defining where the table of contents remains visible. A table of contents at the top of a long post is useful for about four seconds. Making it stick keeps the outline beside the reader the whole way down, so they can jump sections without scrolling back. *For every Table of Contents setting in one place, see the [Table of Contents block guide](https://nexterwp.com/docs/add-a-table-of-contents-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-table-of-contents/) ## Before You Start - **Edition:** **Pro** — the Table of Contents block is part of Nexter Blocks Pro.- **Block to enable:** Table of Contents, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Real headings on the page:** the list is built from your H1–H6 blocks, so text that only *looks* like a heading will not appear. ## Steps - Add the **Table of Contents** block to your post or page and click **Design from Scratch**. - In the **Layout** panel, pick a **List Type** — **UL** for bullets or **OL** for numbers — and a **Style**. ![The List Type setting with UL and OL](https://nexterwp.com/wp-content/uploads/2026/09/toc-list-type.webp) - Put the block where it can stay visible — usually a narrow column beside your content, with the article in the wider column. - In the **Layout** panel, switch **Position Fixed** on. ![The Position Fixed toggle with its Offset field](https://nexterwp.com/wp-content/uploads/2026/09/toc-fixed.webp) - Leave **Offset** empty to start. Set a number only if you want the list to scroll away with the page for a while before it sticks. - Publish and scroll the page to check it holds its place. > *There are two fields labelled **Offset** in the Layout panel and they do different jobs: the one under **Smooth Scroll** is meant to shift where a click lands, and the one under **Position Fixed** sets how far down the page the list starts sticking.* ## How It Behaves - Before the reader scrolls, the block sits in the page like any other. Once they scroll past it, it gains the class `is-position-fixed` and holds at the top of the screen — measured as `position: sticky; top: 0`.- **Offset is a starting point, not a gap.** It is how far the reader must scroll before the list sticks. Measured: empty sticks by 200 pixels, **300** between 200 and 400, and **800** between 700 and 1000.- **Whatever Offset you set, the stuck list sits at the very top of the screen.** The number does not push it down — every value measured gave `top: 0`.- It stays inside its own column, so it stops when that column ends rather than following forever. ## Limitations - **Pro only.**- A list pinned to the top of the screen can sit under a sticky site header. If the two overlap, the usual fix is to make the header non-sticky on those templates.- There is no setting for a gap between the top of the screen and the stuck list.- On a phone a pinned list eats a lot of a small screen — pair it with [a collapsible list](https://nexterwp.com/docs/create-a-collapsible-table-of-contents-in-wordpress/) so readers can fold it away.- **One per page.** With two Table of Contents blocks on the same page only the first one is filled in — the second stays empty. This was measured on the front end. ## Troubleshooting ### It scrolls away instead of sticking Either **Position Fixed** is off, or the block is in a column that ends early — a sticky element cannot outlive its container. Give the column the full height of the article. ### It only sticks much further down the page **Offset** has a large number in it. Clear the field to have it stick as soon as the reader scrolls past. ### It is hidden behind my site header The stuck list always sits at the top of the screen, so a sticky header will cover it. Turn the sticky header off on these templates, or move the list into a column that starts lower down. ## Related Docs - [Table of Contents block: all settings](https://nexterwp.com/docs/add-a-table-of-contents-in-wordpress/)- [Collapsible table of contents](https://nexterwp.com/docs/create-a-collapsible-table-of-contents-in-wordpress/)- [Smooth scrolling](https://nexterwp.com/docs/add-smooth-scrolling-effect-to-wordpress-table-of-contents/)