I'm currently making my website more mobile-friendly, but :hover doesn't work on mobile. I have buttons and other elements with hover transition effects so I thought the next best solution would be running the effect when the element is in the middle of the user's screen, like how on the youtube app it will start playing the beginning of a video if it is in the middle of your screen. How do I use Javascript to detect when an element is vertically in the middle of a user's screen, let's say somewhere in the range of 300px to 600px, and to apply a css transition, like changing the color from white to red over 1 second?