How to call a function when something on display?

Question

Suppose I have a web page with five different section. I want to call a javascript function when third section is on screen. This function should run in every kind of screen when some one viewing that element. Whether it is small device or large it shouldn't matter. I think its clear to you what I want to do.

Answer 1

Use this function

function isElementIntoView(el) {
var e = document.querySelector(el);
var rect = e.getBoundingClientRect();
return window.innerHeight-rect.top >= 0;
}

Check out a sample code here, popup modal shows when reach summary section:

https://code.sololearn.com/WIW74eZ7218c/?ref=app

Answer 2

Thank you very much