The Js creates an element which I’ve called myObserver and I’ve placed it in relation to the body at 30% from the top of the viewport. It may help if you make the element visible because at the moment its hidden as its not used for anything other than observing. I’ve added some more height and width so you can now see it at 30% from the top of the page.
/* this element added by JS to act as the observer*/
wow, very intelligent programming. I was unable to interpret it on my own.
Is there a way we can change it through JS also? Changing it through CSS is simple, but is there a way around if we can change it through JS?
Scroll bar position: 30%, for example, will be needed to do something else. In real situations, there is no need to show this DIV. but even if we use display:none then it will not be treated as intersected by Intersection observer API.
The observer div is already hidden in my original code as it is only 1px x 1px and has no effect on the page content at all due to the negative z-index and the pointer-events:none;. There is no need for display:none to hide it; it’s already invisible. You can just forget about it.
Yes you can do it in JS if you need to by setting the top:position of the style object.
Sir, If we set opacity: 0 then also we can make it invisible, Right? This may be another way to make it invisible?
This is very useful when we may build something of any commercial utility and this 30% of 80% or any other x% is based on what value the administrator of the website has chosen in the admin option this can be easily customized.
Yes opacity:0 can make elements transparent but is not needed in my demo because the element is already transparent and has no content.
If you are talking about other cases perhaps then you can use opacity to hide things but you still need pointer-events to avoid the element blocking something else. You would also need to ensure the element takes up no space so hiding with clip may be better. It all depends on your use case.
For the observer though we want it to be 1px x 1px so we can observe it properly. It causes no harm and just scrolls up and down and triggers the routine on intersection.
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.