Toggling classes on sticky header

[D.Cus]

I have made some amends to a demo I found of a sticky header. I was trying to add a class when the user is at the top of the browser in order to blend the header into a hero or something. Is what I have done the most efficient way to do this?

 

Also is there some way of delaying the show and hide classes to avoid the flash of red on scroll down?

See the Pen mdOqXbr by darren-ignition (@darren-ignition) on CodePen

[ZachSaucier]

Hey D.Cus. Generally speaking it's best to avoid animating using class names as it's a lot easier logically to just animate properties directly. Can you please show an example website or video of what you're trying to accomplish? That would help us better understand how we can help you get there.