@media (min-width: 1300px) {
.gh-toc {
position: sticky; /* On larger screens, TOC will stay in the same spot on the page */
top: 4vmin;
grid-column: wide-start / main-start; /* Place the TOC to the left of the content */
height: 0; /* This should fix the spacing issue */
padding-right: 8rem; /* This will give your TOC a bit more room to breath */
}
I’ll look at updating the TOC tutorial to reflect these changes.
What I think is happening here is that Tocbot is collapsing and expanding your TOC as you scroll, which is causing the jumps. This is more prominent on posts with lots of headings.
Unfortunately, this is part of how the library works. One workaround is to make the TOC totally expanded by default. You can do this by adding collapseDepth: 6 to the Tocbot config. The (potential) downside here is that your TOC will be totally expanded and won’t have that collapse effect.
Two other unrelated suggestions. Updating your CSS will make the TOC appear a bit better.
You can remove height: 0 and change padding-right: 8rem to padding-right: 1.6rem.