Skip to content

Instantly share code, notes, and snippets.

@claygriffiths
Last active August 7, 2023 17:17
Show Gist options
  • Save claygriffiths/dabd4f01122f59c2f820cde648af4a2b to your computer and use it in GitHub Desktop.
Save claygriffiths/dabd4f01122f59c2f820cde648af4a2b to your computer and use it in GitHub Desktop.
Gravity Wiz Redesign: Sticky Scrollbar
.table-of-contents {
position: sticky;
top: 2.25rem;
overflow-y: auto;
max-height: calc(100vh - 2.25rem);
margin-top: 2.25rem;
padding-bottom: 2.25rem;
box-sizing: border-box;
}
.table-of-contents a.active {
color: rgb(144 46 239) !important;
}
.table-of-contents::-webkit-scrollbar {
width: .25rem;
}
.table-of-contents::-webkit-scrollbar-track {
appearance: none;
}
.table-of-contents::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: transparent;
}
.table-of-contents:hover::-webkit-scrollbar-thumb,
.table-of-contents:focus::-webkit-scrollbar-thumb {
background-color: #aaa;
}
// Run this in Chrome DevTools. This is obviously just for PoC and you wouldn't load the script like this.
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/simple-scrollspy/2.4.0/simple-scrollspy.min.js';
document.head.appendChild(script);
setTimeout(() => {
scrollSpy('.table-of-contents', {
sectionClass: '.content [id]',
enableLocationHash: false,
threshold: 1,
onActive: (el) => {
el.scrollIntoViewIfNeeded();
}
});
}, 1000);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment