How to change the block on scroll in JS?

Question

css

There is a block, when scrolling it is fixed, and it is necessary that when the scroll reaches about half of the screen, this block is repainted in a different color.
How can I make JS track the coordinates from the starting point of this block, and after 700px on top add the desired class?
Help!

Answer 1

Here is https://jsfiddle.net/serii/6Lnkqb7s/7/ keep