website - remove sticky from sidebar

[3052]

https://www.gyan.dev/ffmpeg/codexffmpeg-gyan-dev.css https://www.gyan.dev/ffmpeg/builds/

because of sticky, the sidebar is unusable:

[GyanD]

Not sure what you mean. I tested the site in Firefox, Chrome and Edge, and the sidebar links worked. No one else since the start of this layout 2 years ago has complained.

[3052]

1. adjust your viewport height, so that the sidebar is taller than the viewport
2. scroll down, and realize you cannot reach the end of the sidebar, until you scroll ALL the way to the bottom of the page

in general, CSS position:sticky is a footgun and should be avoided.

[GyanD]

That's an unusually short viewport. Note all the content itself remains scrollable.

The sidebar is meant to be a quick access navigation aid which is why it's sticky. Having it flow with the top portion of the content column out of view defeats that purpose.

If you can suggest a workaround that preserves that role, I can look into it. Else the tradeoff isn't worth it to me.

[3052]

on my computer, even if I use my second monitor which is missing the taskbar, and even if I maximize the window, I cannot see the full sidebar. I would say that sidebar has been designed with an unreasonable expectation of window height:

[GyanD]

Let me see if there is an acceptable workaround.

[pixeled4life]

You can add overflow:auto and a max-height (70vh looked fine to me) to the #current-page-navigation css rules.

#current-page-navigation {
    overflow: auto;
    max-height: 70vh;
}

That way the sidebar will not grow bigger than the display and gain a scrollbar when too small.

Also not using vh or percentages for the margin-top and min-height instead of px would be a good idea but idk if it's a priority