-
Notifications
You must be signed in to change notification settings - Fork 25.6k
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
Conversation
f66dc60
to
f0c361d
Compare
Can you please tell me why the right sidebar does not use the styles that are default in the left sidebar?
For all sticky sidebars to have scrolling? |
@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 |
@mmiss 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 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;
} |
Well, review was definitely needed. Proof bce2b50. Now I have no idea how my code "worked" for years. |
Firefox behaves erratically with mmistakes#3115
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)