Single post Table of Contents sticky sidebar widget

Here is a neat trick to have a sticky Table of Contents (TOC) in your single post’s sidebar. In this example, we have set out the single Blog layout to have a left and right sidebar. We do that by going to Customizer -> Layout -> Sidebars and select Sidebar / Content / Sidebar from the Single Post Sidebar Layout section.

Customizer options for single post sidebars
Customizer options for single post sidebars.

Install the Easy Table of Contents plugin. Go to Settings -> Table of Content, enable support for Posts and make sure no checkbox is checked under any of the Auto Insert settings.

Table of Content settings
Table of Content settings

Go to Appearance -> Widgets and drag the Table of Contents widget to your Left Sidebar area. Drag any other widget for your right sidebar area. It could be a text, HTML widget, or any other widget of your choosing. In my case, it’s a text widget but could be anything, like an Ad widget, for example.

Left / Right widget selection
Left / Right widget selection

Finally, add the following CSS:

@media (min-width: 769px) {
    .site-content {
        display: flex;
    }
    .inside-left-sidebar {
        height: 100%;
    }
    .inside-left-sidebar aside:last-child {
        position: -webkit-sticky;
        position: sticky;
        top: 20px; /* Adjust to suit position */
    }
}

Write your post and use headings as normal. The Table of Contents plugin will pickup the headings and populate the Table of Contents widget.

Sticky Table of Contents demonstration
Sticky Table of Contents widget demonstration