How to animate On scroll using css and javascript?

Question

Hello , suppose you have a website. You want to animate the top section of your home page. At the top section you have a h1 item. You want if some one scroll down 75% h1 one tag will be disappear with some animation like fade-in-out. And you want to display something else on that section. How you will do it with CSS and Javascript.
If you can please help me. I badly need to learn this, I can't move forward without learning this.

Answer 1

Here the code you need
https://code.sololearn.com/WcoTCcY2T4Yu/?ref=app

Answer 2

If you page able to scroll down 75% of the total page height, most likely the top section h1 is not visible on page any more?

Answer 3

actually I didn't mean 75% of total page height I mean section height.