scrollX position function only works when I refresh the page

scrollX position function only works when I refresh the page

https://jsfiddle.net/martaklopf/Ltgj2kt0/2/

Hi!

I have been struggling with the code I posted. What I am trying to do is change the background color and text based on the horizontal scrolling position, which is working on refresh. If I refresh the page when my scrollX is <421 than the background changes to blue and some text gets changed, and if I refresh when it is >421 the background changes to red. However, I would like this to work without refreshing (=as I am scrolling, once I pass 421 the background changes without me refreshing).

Is this possible?

Thank you!