Use CSS to make Table of Contents sticky
Originally we were using Foundation's sticky, which wasn't entirely compatible with our way to open/close the Table of Contents because its width would not automatically be updated when the TOC was opened/closed but when users scrolled the page. Using CSS, which is now supported in most browsers, simplifies the matter. On browsers like Internet Explorer, where it's not supported, the content will not stick but other than that it'll work fine. We're also adding `scroll: auto` so when the TOC's height will be large than the page, it'll be possible to scroll it, which users couldn't do in the original version.
This commit is contained in:
@@ -384,6 +384,15 @@
|
|||||||
.calc-index {
|
.calc-index {
|
||||||
max-width: calc(35% - 25px);
|
max-width: calc(35% - 25px);
|
||||||
|
|
||||||
|
.draft-index {
|
||||||
|
@supports (position: sticky) {
|
||||||
|
max-height: 100vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
position: sticky;
|
||||||
|
top: $line-height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
padding-right: rem-calc(20);
|
padding-right: rem-calc(20);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user