[Support request] Sticky Table of Content on Sidebar

[Linux TLDR]

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.

[David]

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.

[Linux TLDR]

Is that possible to achieve with elements?

[David]

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.

[Linux TLDR]

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

[David]

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.

[Linux TLDR]

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

[David]

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;
    }
}

[Author]

Posts