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.
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.
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.
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.