Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Auto scroll sticky ToC with content #3115

Merged
merged 2 commits into from
May 4, 2024
Merged

Conversation

iBug
Copy link
Collaborator

@iBug iBug commented Aug 10, 2021

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
Copy link

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
Copy link
Owner

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

Screen Shot 2022-02-04 at 10 28 14 AM

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

Screen Shot 2022-02-04 at 10 25 00 AM

@nenge123
Copy link

@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
Copy link

1
2

@iBug iBug merged commit dc41016 into mmistakes:master May 4, 2024
1 check passed
@iBug iBug deleted the scroll-sticky-toc branch May 4, 2024 17:05
@iBug
Copy link
Collaborator Author

iBug commented May 4, 2024

Well, review was definitely needed. Proof bce2b50.

Now I have no idea how my code "worked" for years.

iBug added a commit to iBug/minimal-mistakes that referenced this pull request May 6, 2024
minyoongi96 pushed a commit to minyoongi96/minyoongi96.github.io that referenced this pull request Aug 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants