Auto scroll sticky ToC with content

[iBug]

trafficstars

This is an enhancement or feature.

Summary

Make sticky ToC scroll with content. Uses window.getComputedStyle API to ensure scrolling only happens on wide screens.

Preview: My blog (I've had this snippet on my site for long)

[team-community]

Can you please tell me why the right sidebar does not use the styles that are default in the left sidebar?

.sidebar__right.sticky {
    overflow-y: auto;
    height: calc(100vh - 2em - 2em);
}

For all sticky sidebars to have scrolling?

[mmistakes]

@team-community That CSS only works for the left sidebar. If applied to the right sidebar the height will be wrong and it'll still overflow beyond the viewport.

This is because the table of contents sidebar isn't flush with the top of the main container like the left sidebar is. Because it's not flush at the top there's no easy way to determine the height unless some JavaScript is applied to figure that out.

Ideally the table of contents sidebar on the right would be flush at the top and align with the left sidebar, but there are some limitations due to where in the DOM it's placed. It's inside the page content container and comes after the h1 headline... which is where the extra space above it is from (causing it to push down).

[nenge123]

@mmiss it can no float and no absolute to sticky.

sidebar__right {
position: sticky;
    top: 0px;
    right: unset;
    width: 200px;
    margin-left: 100%;
    margin-right: unset;
    padding-left: 1em;
    z-index: 10;
    height: 0px;
    overflow: visible;
  .toc{
    max-height: 60vh;
    overflow: auto;
}
}

if add javascript it can

        document.addEventListener('scroll',e=>{
            let size = document.documentElement.getBoundingClientRect();
            let size2 = document.querySelector('.initial-content').getBoundingClientRect().y;
            let size3 = document.querySelector('.page__content').getBoundingClientRect().y;
            Object.entries(
                {
                    '--scroll-height':size.height+'px',
                    '--scroll-top':0-size.y+'px',
                    '--scroll-top2':size.y+'px',
                    '--scroll-innerheight':window.innerHeight+'px',
                    '--scroll-bottom':window.innerHeight-size.y+'px',
                    '--scroll-y':0-size.y>200?window.innerHeight-size.y+'px':false,
                    '--initial-content-y':size2+'px',
                    '--page-content-y':size3+'px',
                    '--page-content-py':size3>0?size2-size3+'px':'0px',
                }).forEach(entry=>{
                    document.documentElement.style.setProperty(entry[0],entry[1]);
                });
        })

.sidebar__right {
    position: sticky;
    top: 0px;
    right: unset;
    width: 200px;
    margin-left: 100%;
    margin-right: unset;
    padding-left: 1em;
    z-index: 10;
    height: 0px;
    overflow: visible;
    transform: translateY(var(--page-content-py,0px));
    transition: all .3s;
}

[nenge123]