How to fade between a series of sticky divs with scroll? [closed]

I have a series of full screen divs (for example 5) stacked on top of each other in a grid. I want to be able fade them in and out in sequence as I scroll up and down on the page. I want to make it with vanilla js, no jquery and the like.

I have the five divs stacked inside a grid but I cant figure out how to make them fade in and out based on scroll. Is intersection observer the way to go?

I figured I could put my five divs inside a container that is 500vh high and calculate the opacity for each div based on some scroll position inside that, but how to code that calculation escapes me?