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.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
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.
- 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.
- 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.
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.
