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:
Javi Martín
2020-11-14 20:47:36 +01:00
parent 48daf22f31
commit 0961cf464c

View File

@@ -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);
} }