Adding bottom to toc

[lukasoppermann]

This fixed the toc which is otherwise cut off at the bottom in chrome at least.

[RunDevelopment]

This approach has the problem that when scrolled to the bottom of the page, the TOC is under the footer.

A better (but also more complex) solution would be to move the TOC to the top while scrolling using JavaScript, so that toc.style.top = max(0, header.height - scrolled) + 'px'.

[lukasoppermann]

This is true, although I think it is still better than having only half of the nav for the entire time. 😉

[RunDevelopment]

Sorry for not getting back to you!

My problem is that the TOC will disappear at the end of the page. On smaller screens, this might not be a problem but for larger ones, the end of the page comes to you quickly.

So how about this: We wrap your bottom: 1%; into a media query with (max-height: 800px) so that only smaller screens have the fix.
800px nicely picks up the TOC on all pages that use it.

[lukasoppermann]

No worries, I know that everybody is busy, especially around new years. 🎆

Anyway, I think your idea has a problem as well. What do you think of this solution?

[RunDevelopment]

I think your idea has a problem as well.

What problem?

---

The TOC overlaps part of the page for small screen widths.
It did that before as well but then it wasn't noticeable.

Apart from that, I really like it.

[RunDevelopment]

Seems like this can be fixed by setting the TOC's box-sizing to border-box and its max-width to calc(48% - 450px - 30px).
- 30px for the § anchor marks.

[RunDevelopment]

Also, what do think about making left and bottom fixed px values?

It's a little awkward to see the TOC move a few pixels as you resize the page.

[lukasoppermann]

Will change it. I prefer px values, just stuck with percentage as it was used before.

[lukasoppermann]

Okay, changed it.

• need to adjust the green checkmarks as they would have been otherwise covered by the very small screen size.
• moved it flush to the left and removed some padding to make it work on the smallest screen size as well.

[lukasoppermann]

Should all be fixed by now.

[RunDevelopment]

Nice!

Could you please restore the green checkmarks to their former size (400%)? They are not covered anymore, are they?

And please bring back the hover effect. Changing the color instead of the opacity in #toc:hover should do the trick.

[lukasoppermann]

Done. 👍

[RunDevelopment]

I forgot one last thing:

The FAQ page treats the TOC as part of the content section. The cool hover effect shouldn't be there.

[lukasoppermann]

Updated the faq.html.

[RunDevelopment]

Thank you for contributing!

[lukasoppermann]

Sure, happy to see it fixed. 😉