How to Make a Sticky Table of Contents in WordPress Using Gutenberg and the Sticky Block Plugin

Why a Sticky Table of Contents Makes a Difference

When you publish a long guide, users often rely on a table of contents to jump between sections. But a static table of contents at the top means readers have to scroll back up every time they want to skip ahead or revisit a section.

A sticky table of contents solves this by following the reader as they scroll. It stays visible inside a side column, so navigation options are right where readers need them.

Planning Your Layout: Introduction and Structure

Before you jump into the blocks, think about how you want your article to look. Here’s a layout that keeps things clear:

• Intro, cover image, and affiliate disclaimer appear at the top, full-width.
• From the table of contents onward, content gets wrapped into a two-column row. The left, thinner column holds the sticky table of contents; the right, wider column contains your main content.
• Elements like your author bio and Pinterest pins can sit outside this row at the end, holding their full width across the page.

This structure puts quick navigation right next to your main content but keeps the header clean and welcoming.

Setting Up the Two-Column Layout in Gutenberg

Let’s get into the practical steps, assuming you’ve already got your post written and your table of contents block is in place.

1. Add a Two-Column Row Layout

Within your post, locate the spot right after your introduction and disclaimer. Here, insert a new Row Layout block. When choosing the column structure, pick the “right heavy” option. This gives you a smaller left column (for navigation) and a larger right column (for the main post).

2. Move Blocks Into the Columns

• Move your table of contents block into the smaller left-side column.
• Select all main content blocks (everything after your table of contents, except the author bio and any footer elements).
  • In the Gutenberg editor’s list view, click the first block, hold Shift, and click the last block to select the range.
  • Drag this block group into the wider right-side column.
• Make sure not to include the author bio or final blocks that should stay full-width.
• Save your draft.

Now your article’s introduction and image remain at the top. Below that, the main content sits in a right-side column, and the navigation stays on the left.

3. Fine-Tune the Table of Contents Block

Check that your table of contents sees all your headers correctly—ideally picking up your H1, H2, and H3 elements. The Kadence table of contents block lets readers collapse or expand the list, which saves space and helps readability. Enable the collapse feature if it fits your content.

Adding the Sticky Block for Persistent Navigation

The magic of sticky navigation is in making your table of contents follow the reader without constant scrolling. Here’s how to add and set it up:

1. Install the Sticky Block Plugin

Go to Plugins > Add New in your WordPress dashboard and search for Sticky Block. It’s lightweight and adds a single block type to the Gutenberg block library—no extra settings or bloat. Install and activate it.

2. Wrap Your Table of Contents With a Sticky Block

• In your post editor, locate the row containing your table of contents in the left column.
• With the list view open for easier handling, add a Sticky Block just outside your table of contents column.
• Drag the entire table of contents row (containing the navigation block and its background settings, if any) inside the Sticky Block. Use the list view to drag and drop the group correctly.

3. Fine-Tune the Sticky Behavior

• Select the Sticky Block to open its settings.
• Set a top offset—ten pixels is a good start—to prevent the sticky block from sticking hard against the top of the browser window. This leaves a little breathing space.
• Adjust responsive settings. Set a maximum screen width (e.g., 600 pixels) under which the block stops being sticky. This ensures you don’t enable the sticky block on mobile, where the column layout will stack vertically for easier reading.
• The Z-index option lets you control the layering if you have overlapping elements, but for most blogs you can leave it as is.

Save your changes and preview your site. You’ll see your table of contents stays fixed as you scroll through the article’s main content.

Preventing Overlap With Footers or Author Bios

As you scroll near the end of your article, you might notice the sticky table of contents can end up overlaid on your author bio or bottom widgets. That’s easy to fix with the pushup (or stop) feature built into the Sticky Block.

1. Set a Stop Point With a Spacer and Anchor

• Insert a Spacer Block right before your author bio or any element you want the sticky block to stop above.
• In the Spacer Block settings, add an HTML anchor—such as stop-sticky. This creates a special “pushup” spot.

2. Link the Sticky Block to the Pushup Anchor

• Click into your Sticky Block’s settings in the sidebar.
• In the Pushup Element field, enter the anchor you just set, with a hashtag (e.g., #stop-sticky).
• This tells the sticky block to stop “sticking” when the bottom of the table of contents meets the anchored spacer.

Save and preview again. Now your sticky navigation will keep following readers, but slide up with the rest of the page as they reach your author bio—avoiding awkward overlaps.

What Does This Look Like for Readers?

With this setup, your readers get:

• A clean introduction at the top.
• A persistent, collapsible table of contents at their fingertips as they read.
• Continuous navigation even through lengthy posts.
• Full access to Pinterest pins, author bios, or footers without block overlap.

It keeps your site user-friendly, especially for walkthroughs, guides, or lists where fast navigation is a must.

Mobile Improvements

Keep in mind: on mobile, columns stack vertically, so the table of contents will appear above your main content for easy tap navigation. The sticky block intelligently turns off at a set breakpoint, so your article remains readable on any device.

Tips for a Smooth Setup

• Stay organized in the editor. Use the List View to keep track of nested blocks, especially when dragging content between columns.
• Preview before publishing. Always check desktop and mobile previews to catch issues early.
• Play with spacer size. Adjust your stop-sticky spacer to match your content, making the transition seamless.

Adding a sticky table of contents to your WordPress posts is a simple upgrade that can make a huge difference for readers. With just a few Gutenberg blocks and a lightweight plugin, you can create a layout that guides users through even the longest articles.

This approach helps readers find what they need, keeps navigation handy, and ensures your content makes the impact it deserves. It’s a smart upgrade for any content-heavy site, and setup takes just a few steps.