Problems with scrolling of an element

Hey! I can’t create an animation scrolling. Generally, it is necessary for me that to a certain position on the website the element wasn’t visible. And as soon as the person has scrolled to a necessary position, this element has appeared.

I tried to make something similar with help this course:

But there slightly another. There the element changes the opacity for 100% in a second as the person has begun to scroll the page. It is necessary for me that it depended not on time, and from that, at what position did the person scroll the page.

You can see what I could do. As you can see, the text appears depending on the time, not the position to which I scrolled:

(My work

I will be very grateful for your help!