That headline is a whole travesty š, but dammit, I earned it. I finally figured out how to get both headers to slide down without breaking the scroll movement!
As I suspected, it had something to do with the divs and how I was treating them. Specifically, I needed to treat with the header as a whole to handle the primary header’s movement and then treat with the secondary header as an element within the overall header element… because it is.
Still, I spent a ridiculous amount of time trying to do an end-run around this glaring fact because I didn’t want to have to go back to start on it. Obviously, I had to do that in the end anyway, but I re-learned a good bit about the transition property, positioning and how my Javascript was interacting with my CSS along the way, so it wasn’t wasted time.
Even so, it is hilarious how much time I spent on something that, from the outside, probably looks like next-to-nothing. In fact, I could’ve skipped this effect and moved on, but then I wouldn’t understand what went wrong or how the code works and that would absolutely come back to bite me later on.
So, voila: I now have dual headers that slide and fade in in their own timing while also responding to a scroll event handler. As they should.
Updated repository here.
undefined 