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?