This is my HTML structure for my site
<body>
<div id="container">
::before
<header></header>
<article></article>
<article></article>
<article></article>
<article></article>
<footer></footer>
</div>
</body>
The header is normally position:fixed but on short viewports it's static so it scrolls out of view as normal.
#container::before has my site's photo background, position:fixed, so that it remains in place while the glass-effect opacity:.9 <article>s scroll over it. It's maybe a bit old-school, but it's a pleasing effect that I like and want to keep.
It's important to me though, that the background photo starts immediately below <header>, without any of it being cropped off underneath that element. This is easy enough by modifying the top rule of that pseudo-element to match the (set) height value of the <header>.
...right up until the point where the position:static <header> scrolls off the page on a short viewport.
What I want to happen
I'd like for the background to scroll up along with the <header>, up until the point that the <header> is off the screen, and for it to then stick in place, as if it had position:fixed;top:0.
What's my best option so far?
top:0 on the pseudoelement background if the <header> isn't fixed. It works once the header is off the top of the screen, but it means an important part of the photo is cropped off when the header is on screen.
I could fix this with a JavaScript on-scroll event, but I know that'll be jerky and unperformant. Is there some CSS trickery I can pull with my current HTML setup to overcome this? Even if it's only supported in some browsers, it'd be better than nothing.