---
title: "How to Make a Sticky Table of Contents in Elementor?"
url: https://theplusaddons.com/docs/make-a-sticky-table-of-contents-in-elementor/
date: 2025-01-11
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "Do you want the table of contents to stay on screen while people read? On a long page a list that scrolls away with everything else is only useful once,..."
word_count: 761
---

# How to Make a Sticky Table of Contents in Elementor?

## 

- Table Of Content widget pins the block in place with the Fixed toggle in Extra Options, so any section stays one click away after the reader scrolls past it.
- The Plus Addons for Elementor Pro is required for Table Of Content, and the widget is enabled under The Plus Addons > Widgets before it appears in the editor.
- Fixed Offset uses only the desktop value, and a test with 100 px on desktop and 300 px on mobile still produces a 100 px offset.
- CSS sticky positioning keeps the list working while pinned, with the current section highlighted and each entry still jumping to its section.

Do you want the table of contents to stay on screen while people read? On a long page a list that scrolls away with everything else is only useful once, at the top.

The **Table Of Content** widget has a **Fixed** toggle in its **Extra Options** section. It pins the block in place as soon as the reader scrolls past it, so any section is one click away from anywhere on the page.

*To check the complete feature overview documentation of The Plus Addons for Elementor Table Of Content widget, [click here](https://theplusaddons.com/docs/add-a-table-of-contents-in-elementor/).*

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/table-of-contents/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — Table Of Content is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it shows nothing where the widget was.- **Widget to enable:** Table Of Content, switched on under **The Plus Addons > Widgets**.- **The page needs real headings:** the widget does not create headings, it indexes the ones already on the page. Build the article with heading widgets (H2, H3, H4) before you judge the result.- **Layout matters:** put the widget in a narrow column beside the article, not in a full-width container of its own. Pinning uses CSS sticky positioning, so the block can only stay on screen for as long as the column it sits in is still on screen.

## Steps

- Add the **Table Of Content** widget to the column beside your article and set up **Layout** and **Select Tags** as usual.- Open **Extra Options** and switch **Fixed** on.

![Extra Options section with the Fixed toggle switched on and outlined in the panel](https://theplusaddons.com/wp-content/uploads/2026/09/toc-fixed.webp)

- Set **Fixed Offset** to the distance you want between the top of the screen and the block once it is pinned. Leave room for a sticky header if the site has one.

![Fixed Offset slider set to 100 px and outlined under the Fixed toggle](https://theplusaddons.com/wp-content/uploads/2026/09/toc-fixed-offset.webp)

- Update the page and scroll it in a normal browser tab.

## What You End Up With

Once the reader scrolls past the block, it stops moving and holds its place at the offset you set, while the article keeps scrolling beside it.

![Published page scrolled well into the article, with the table of contents still pinned near the top of the screen beside it](https://theplusaddons.com/wp-content/uploads/2026/09/toc-result-sticky.webp)

## Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Fixed | Pins the block once the page scrolls past it | Hide |
| Fixed Offset | Distance in pixels between the top of the screen and the pinned block. Leaving it at 0 makes the widget use its own position on the page as the trigger point instead. | 0 |

## How It Behaves

- Nothing happens until the reader scrolls past the offset. Below that point the block sits in the flow of the page as normal.- Pinning is done with CSS sticky positioning, so the block is held inside its own column. When the bottom of that column reaches the top of the screen, the block leaves with it.- The list keeps working while pinned: the entry for the section on screen stays highlighted, and clicking an entry still jumps to it.

## Limitations

- **Fixed Offset is not really responsive.** The slider has tablet and mobile values, but only the desktop one is used. In our test a desktop value of 100 px and a mobile value of 300 px both produced a 100 px offset.- **The offset is not cleared when you scroll back up.** After the block has been pinned once, it keeps the offset as a gap above it for the rest of the visit, so it sits a little lower on the page than it did when the page first loaded. With a 100 px offset the block was 77 px lower after scrolling down and back.- A block in a full-width container of its own has almost no room to stick to and will scroll away like any other element.

## Troubleshooting

### The list scrolls away instead of sticking

The widget is in a container that ends almost immediately. Move it into a column that runs alongside the article, so there is space for it to stay in.

### The pinned list sits under the site header

Raise **Fixed Offset** until the block clears the header. Remember that the value you set on desktop is the one used on every screen size.

### The block moved down after I scrolled back to the top

That is the offset staying applied after the block is released. Use the smallest offset that clears your header, or leave **Fixed Offset** at 0 so the widget works from its own position on the page.

## Related Docs

- [How to Add a Table of Contents in Elementor?](https://theplusaddons.com/docs/add-a-table-of-contents-in-elementor/)- [How to Create a Collapsible Table of Contents in Elementor?](https://theplusaddons.com/docs/create-a-collapsible-table-of-contents-in-elementor/)- [How to Add Smooth Scrolling Effect to Elementor Table of Contents?](https://theplusaddons.com/docs/add-smooth-scrolling-effect-to-elementor-table-of-contents/)- [How to Add Sticky Social Icons in Elementor?](https://theplusaddons.com/docs/add-sticky-social-icons-in-elementor/)

## Frequently Asked Questions

**Q: Why does my table of contents scroll away instead of staying fixed on the page?**
A: That usually happens when the widget sits in a container that ends too quickly. The sticky behavior in The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH depends on CSS sticky positioning, so the block needs room inside its column to remain on screen. A narrow column beside the article works better than a full-width container, because the widget can only stick while its own column is still visible.

**Q: What do I need before making a sticky table of contents in Elementor?**
A: The widget only indexes headings that already exist on the page, so the article needs real heading widgets such as H2, H3, and H4 before the table of contents can work. It is also part of The Plus Addons for Elementor Pro, so the Pro plugin must be installed and activated. If Table Of Content is switched off under The Plus Addons > Widgets, it will not appear in the editor.

**Q: How do I keep a table of contents below a sticky site header?**
A: Fixed Offset is the setting that creates breathing room between the top of the screen and the pinned block. Raising it helps the table of contents clear a sticky header instead of sitting underneath it. One important gotcha is that the desktop value is the one used on every screen size, so tablet and mobile values do not change how it behaves in practice.

**Q: What happens to a sticky table of contents after I scroll back to the top?**
A: The offset can stay applied after the block has been pinned once, which leaves a gap above it for the rest of the visit. In the page’s test, a 100 px offset left the block 77 px lower after scrolling down and back up. Using the smallest offset that clears your header reduces that shift, and setting Fixed Offset to 0 makes it use its own position as the trigger point instead.

**Q: Does a sticky table of contents work in a full-width section?**
A: A full-width container is a poor fit for this setup because sticky positioning needs vertical room inside its own column. The block can only stay pinned while that column is still on screen. Putting it in a narrow column beside the article gives it space to stick properly and keeps the reading flow intact while the content scrolls beside it.

**Q: What other Elementor table of contents features are related to sticky mode?**
A: Sticky mode is only one part of how The Plus Addons for Elementor handles table of contents blocks. The same widget also supports collapsible behavior and smooth scrolling, which are covered in [How to Create a Collapsible Table of Contents in Elementor?](https://theplusaddons.com/docs/create-a-collapsible-table-of-contents-in-elementor/) and [How to Add Smooth Scrolling Effect to Elementor Table of Contents?](https://theplusaddons.com/docs/add-smooth-scrolling-effect-to-elementor-table-of-contents/). For setup basics, [How to Add a Table of Contents in Elementor?](https://theplusaddons.com/docs/add-a-table-of-contents-in-elementor/) is the matching starting point.