Site logo

Archived topic

Sticky Table of Content on Sidebar

7 replies · Started by Linux TLDR on January 13, 2023

Viewing posts 1–8 of 8

Hi, I would love to add a sticky sidebar for the Table of Content on the left side of my blog posts that would automatically highlight the TOC link when the post is scrolled.

For your information, I am already familiar with the Easy TOC plugin and how to create left sidebars.

Hi there,

you would need to check with the East TOC plugin author, as the plugin would need to have the necessary scripts to determine current scroll position and add a class to the relevant links.

Is that possible to achieve with elements?

Adding the ToC and making it sticky, we can do.
Can't do the highlight on scroll.

Can i see a page on your site where you want to place the ToC then i can see whats the best option.

On Every Article Page (Blog Post)
Pages and Homepage Excluded

Can you:

1. Create a new Block Element - Hook - in Appearance > Elements.
2. Set the Hook to: before_main_content
3. Add a Container Block, and in the blocks Advanced > Additional CSS CLass(es) add: sticky-toc
4. Add the ToC Shortcode inside that block.
5. Set the Display Rules to Posts > All Posts
Or just add it to one post for testing.

Then share a link to where i can see it, and ill work out the necessary CSS, to make it Sticky on wider screens.

I want to add the ToC on the right sidebar, BTW, how to hide right/left sidebar for mobile devices?

Oh, sorry i thought i read the left hand side... not that it matters, other then there is already a right sidebar.
Would the existing sidebar remain ? If so how does the ToC position itself and become sticky ?

Removing sidebars on mobile use the following CSS.
eg.


/* Right Sidebar */
@media(max-width: 768px) {
    .is-right-sidebar {
        display: none;
    }
}

/* Left Sidebar */
@media(max-width: 768px) {
    .is-left-sidebar {
        display: none;
    }
}

/* Both sidebars */
@media(max-width: 768px) {
    .is-right-sidebar,
    .is-left-sidebar  {
        display: none;
    }
}
This archived topic is closed to new replies.