When I refactored the JavaScript for the floating docs banner in #1972, I suggested using a CSS-only solution. I tried unsuccessfully in #1799, but I hope position: sticky could still work somehow.

Another approach would be to use position: fixed, but we would have to make the content fixed-height. This would be difficult given the amount of text that is currently in the banner element:

The current JavaScript approach feels a bit complex to me and can lead to some odd scroll behavior.

I think this (S)CSS should work if we can make the element fixed-height:

html:has(#dev-warning, #outdated-warning) {
    scroll-padding-top: 38px;
}

body:has(#dev-warning, #outdated-warning) {
    margin-top: 38px;
}

#dev-warning,
#outdated-warning {
    height: 38px;
    position: fixed;
}

I'd be happy to implement a solution if there is a way forward here.