Intersection observer API instead of the scroll event

[PaulOB]

@codeispoetry

The scrolling height will change based on the content available.

That’s not what you asked for?

@codeispoetry

Sir, when 30% scroll bar, for example, of the total available viewport height is scrolled

You asked for 30% of the viewport height. You didn’t ask for 30% of the content height which is completely different thing.

I’m sure there is an easier way of doing this so one of the JS gurus may have to jump in but I made the observer element 30% of the height of the content (using position:relative on the content and appending the observer to the content and placed absolutely).

Change the width of the myObserver element to 100px and its background to green to see how it works.

I’m sure there is a more elegant way but it seems to work.