<body> docked class not removed when scrolling back to the top?

AI-generated summary

The discussion is about the docked class remaining on the <body> element when scrolling back to the top. Canapin is trying to create a sticky header that changes appearance when scrolling, but the persistent docked class prevents this. awesomerobot explains that the docked class is intended for additional content in the header, and without custom content, the header remains docked permanently. This behavior can cause a slight “pop” when scrolling for the first time. awesomerobot mentions that improving this behavior is possible but requires careful consideration to avoid breaking existing customizations. Canapin suggests adding a specific class for the sticky header state, which awesomerobot agrees would be helpful.

Hi.
When we start scrolling, the class docked appears on <body>.
But when we scroll back to the top, the class docked remains.

Is that supposed to be this way :thinking:? I’d like to make the header different when it goes sticky, and I currently can’t because of this.

Maybe @awesomerobot will know?

If I remember correctly the docked class is meant for additional content added to the header (in the Header section of a theme). You can add a line of text to Header to see the class show/hide as expected.

So unless you have custom header content, the header is docked at scroll and stays that way permanently.

At one point ages ago (think 4+ years) we undocked the header at the top of the page… but that regressed, went unnoticed for a long time, and then we decided to adopt the regression.

We can likely improve it, the current behavior causes a little initial “pop” as you scroll for the first time (hard refresh to see it)… but we do have to be very careful to not break all the existing header cusotmizations out there (there are lots of them!). It might make sense to wait a little bit longer (until we drop IE11) and then look at making more significant improvements along with it, like using position: sticky; instead of fixed.

I’m not sure if your reply also implies this but in the future, if it is possible to have a specific class when the header goes sticky that would be neat. A lot of site these days use large, tall headers and I was asked several times to customize a Discourse forum to have such a header. But a tall header means it has to be resized when we scroll and a pre-existing class would be perfect for that.

oh yes sorry, I didn’t imply that very clearly. I do think it would be something helpful we should add!