nomadjimbob/mikio

[Feature request]: Make TOC Sticky with set to full height

hubdot opened this issue · 1 comments

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

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