How to make the block appear in full screen when scrolling the page to a certain place?

Question

Vue.js

How to make the block appear in full screen when scrolling the page to a certain place?

But at the same time, it should be removed if we scroll the page back up. That is, we turn down, it appears. Turn up - removed.

Suggest a solution. You are welcome.

Answer 1

In general, I succeeded. the solution is of course the same. But it doesn't work the way I want it to. That is, I first received the data from the scroll. Then he fulfilled the condition. But here's how to make the block appear exactly smoothly. I can not understand.
It now works on the ON/ON principle. But how to make it smooth appearance.
I understand that something like this, that for every 10 scroll points, we add, for example, 0.1 to the transparency.
But it seems to me that this is some kind of nonsense (: