How to not animate an element (css) if the document is scrolled by N pixels?

Question

css

Good afternoon. I decided to deal with animation in css (a cool thing ... I regret that I didn’t do many things in css before).
I made a fixed navigation in the header, which after 300 (for example) pixels with animation changes the background and size. It works cool, but there are a couple of nuances that, due to inexperience, I can’t solve without you yet ...
There is a block with the class "header". From jQuery I expose for it the second class "minimized". Primary styles are written in css for header, and changed for header.minimized. Now the problem is, if you refresh the page when it's scrolled below 300px and the nav has already changed, it re-animates from the primary to the secondary styles. This is understandable, because the class is already installed from jQuery and css clearly works out what it should. It turns out not critical, but not very beautiful, because the navigation "jumps" when the page is updated.
I had thoughts on loading to check the position and set a pre-minimize class that turned off the "transition" property for the header (temporarily, only during the first position check), so that the styles from "minimized" would be set without animation, but then due to a delay there is an even more terrible "jerking" - first we see the standard navigation, and then a jerky transition to changed styles))
How do you solve such problems, or do you forget about such trifles?

Answer 1

do 2 classes. one that is added immediately when the page is loaded, and the second on the on scroll event. the first to change the navigation without animation, and the second with animation.
well, in the second, set the condition that if the first class already exists, then nothing was done with on scroll.