[Feature request]: Make TOC Sticky with set to full height
hubdot opened this issue · 1 comments
hubdot commented
Hey there, :)
thanks for the awesome work on Mikio.
It would be nice if there was another option for the TOC to make it float with content if set to tpl»mikio»tocFull > [x] checked.
On long pages the TOC stays on the TOP and thus leads to a lot of scrolling and losing track of where you've been. It'd be nice to have the option of it float.
https://i.imgur.com/LkwmI1A.png
If the TOC exceeds device display height a scrollbar could be added:
https://i.imgur.com/GF5bnrq.png
nomadjimbob commented
Good point above.
If you are not using LESS, you can edit the /assets/mikio.css and change the following:
.mikio .mikio-content .mikio-article.toc-full .mikio-toc {
margin-top: 1rem;
order: 2;
}
to
.mikio .mikio-content .mikio-article.toc-full .mikio-toc {
margin-top: 1rem;
order: 2;
position: sticky;
position: -webkit-sticky;
top: 1rem;
align-self: flex-start;
overflow: scroll;
max-height: 100vh;
}
I will add this to the next release which is currently pending the fix for #23