[Resolved] How to re-create a Fixed scrollable full height s-bar similar to Google Docs

[Alexander]

This is a continuation of the original topic #1130434 from 2020, that I believe went unresolved.

I need a scrollable fixed (the fixed part is solved, I just need to make it scrollable) sidebar to use with a single widget – Table of Contents as a page contents summary. A good example of this kind of sidebar would be a Google Docs template. Here are some links and screenshots to help you understand my point better:

• Google Docs page live link: https://docs.google.com/document/d/1-s3xn-sOZ3-9HBCyKLOCYpUKCo8NsiCXXeKdNQUzjbc/edit?usp=sharing<br&gt;
  I like the Google Docs page style. I’d love to re-create the left sidebar style and functionality.
• Google Docs example screenshot:
• Jasper AI example

My Website Link. The site is under construction

Any help would be appreciated.

[Fernando]

Hi Alexander,

Here is a CSS you may try adding in Appearance > Customize > Additional CSS:

aside#ezw_tco-6 nav {
    height: 60vh;
    overflow-y: auto;
}

There’s a script altering the position of the TOC when it reaches the bottom though. You’ll need to remove/disable that probably.

Hope this helps!

[Alexander]

Wow, Fernando! You got it!
So quick too.
I just changed the height to 90vh and I’m satisfied with it.

Thanks a lot, guys. Keep up the great work! I’m closing the ticket

[Fernando]

You’re welcome Alexander!

[Author]

Posts