Hi. When we start scrolling, the class docked appears on . 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.

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.

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

Product Support

awesomerobot (Kris) April 1, 2020, 1:33am 6

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

Topic		Replies	Views
"docked" in <body> always present? Bug	2	658	February 2, 2022
Stick header in proper scroll position when having a custom fixed topbar on top of it Product Support	6	3452	March 14, 2019
Elastic scrolling on ipad causes header to unstick from top of window UX tablet	4	1724	September 21, 2015
Option to keep header docked with custom header above? UX	0	602	July 27, 2020
Logo in docked header bar Product Support	1	626	January 27, 2022

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

Related topics