Sorry, I may not be able to read your code and tell you why it's not working but I also had a need for such a solution, after much going around this worked for me and I have taken the time to explain it. Perhaps you can go through and modify the function to do whatever you desire. I am very young in Javascript so my solution may not be the best, but somehow it works. I just hope you find something meaningful in it.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// Get the div element with the id "monkey".
const monkey = document.getElementById('monkey');
checkVisibility = () => {
// Check if the div element is scrolled into view.
if (monkey.getBoundingClientRect().top < window.innerHeight/2 ) {
// Change the background color to red.
monkey.style.backgroundColor = 'red';
monkey.innerText = "I made it at last hurrayyyyy!!! " + window.innerHeight
//If you want this to happen only once then you can add line 20, if not don't remove the eventlistiner as I did in line 20(I mean delete line 20)
window.removeEventListener('scroll', checkVisibility )
}
}
// Set a listener for the "scroll" event below the function.
window.addEventListener('scroll', checkVisibility );
<!-- language: lang-css -->
EXPLANATION TO CODE
/*
COMMENTS
see JAVASCRIPT line 11: I did
window.innerHeight/2 ...divided by two will mean that when the monkey div gets to half of the screen, the function is fired. you can mathematically twerk that to what you want.
if you remove the divide by two entirely, by that I mean to change the code at line 11 as
if (monkey.getBoundingClientRect().top < window.innerHeight) {
immediately the monkey div appears on the screen the function is fired.
CAUTION: DO NOT PLACE LINE 27 ABOVE LINE 8 AS YOU WILL BE SETTING THE EVENT LISTENER AHEAD OF THE FUNCTION AND IT MAY NOT WORK. AT LEAST WHEN I TRIED IT OUT, THAT WAS WHAT I FOUND.
*/
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>ZigLewis solution to making a function run when an element gets to a particular screen position
</title>
</head>
<body>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem doloremque molestiae delectus asperiores, eaque totam? Dicta deleniti repelr vel duptates mollitia rem doloremque excepturi reprehenderit fugit exercitationem incidunt. Non deleniti beatae fuga fugit culpa aliquam fugiat error .</p>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem doloremque molestiae delectus asperiores, eaque totam? Dicta deleniti repe </p>
<p> SCROLL UP SLOWLY TILL YOU CANT SEE ME! </p>
<br>
<hr>
<div id = "monkey"> KEEP YOUR EYES HERE ON THE MONKEY </div>
<hr>
<br>
<br>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem doloremque molestiae delectus asperiores, eaque totam? Dicta deleniti repelr vel duptates mollitia rem doloremque excepturi reprehenderit fugit exercitationem incidunt. Non deleniti beatae fuga fugit culpa aliquam fugiat error provident facere quo soluta porro accusamus qui sed assumenda, alias excepturi ratione minus voluptates vel aspernatur cum doloribus sapiente. Libero, consequatur quam at quos quae rem.
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem doloremque molestiae delectus asperiores, eaque totam? Dicta deleniti repelr vel duptates mollitia rem doloremque excepturi reprehenderit fugit exercitationem incidunt. Non deleniti beatae fuga fugit </p>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem doloremque molestiae delectus asperiores, eaque totam? Dicta deleniti repelr vel duptates mollitia rem doloremque excepturi reprehenderit fugit exercitationem incidunt. Non deleniti beatae fuga fugit </p>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem doloremque molestiae delectus asperiores, eaque totam? Dicta deleniti repelr vel duptates mollitia rem doloremque excepturi reprehenderit fugit exercitationem incidunt. Non deleniti beatae fuga fugit </p>
</body>
</html>
<!-- end snippet -->
This code can solve this problem in javascript
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// Get the div element with the ID "monkey".
const monkey = document.getElementById('monkey');
checkVisibility = () => {
// Check if the div element is scrolled into view.
if (monkey.getBoundingClientRect().top < window.innerHeight/2 ) {
// Change the background color to red.
monkey.style.backgroundColor = 'red';
monkey.innerText = "I made it at last hurrayyyyy!!! " + window.innerHeight
//If you want this to happen only once then you can add line 20, if not don't remove the eventlistiner as I did in line 20(I mean delete line 20)
window.removeEventListener('scroll', checkVisibility )
}
}
// Set a listener for the "scroll" event below the function.
window.addEventListener('scroll', checkVisibility );
<!-- language: lang-css -->
EXPLANATION TO CODE
/*
COMMENTS
see JAVASCRIPT line 11: I did
window.innerHeight/2 ...divided by two will mean that when the monkey div gets to half of the screen, the function is fired. you can mathematically twerk that to what you want.
if you remove the divide by two entirely, by that I mean to change the code at line 11 as
if (monkey.getBoundingClientRect().top < window.innerHeight) {
immediately the monkey div appears on the screen the function is fired.
CAUTION: DO NOT PLACE LINE 27 ABOVE LINE 8 AS YOU WILL BE SETTING THE EVENT LISTENER AHEAD OF THE FUNCTION AND IT MAY NOT WORK. AT LEAST WHEN I TRIED IT OUT, THAT WAS WHAT I FOUND.
*/
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>ZigLewis solution to making a function run when an element gets to a particular screen position
</title>
</head>
<body>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem doloremque molestiae delectus asperiores, eaque totam? Dicta deleniti repelr vel duptates mollitia rem doloremque excepturi reprehenderit fugit exercitationem incidunt. Non deleniti beatae fuga fugit culpa aliquam fugiat error .</p>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem doloremque molestiae delectus asperiores, eaque totam? Dicta deleniti repe </p>
<p> SCROLL UP SLOWLY TILL YOU CANT SEE ME! </P>
<br>
<hr>
<div id = "monkey"> KEEP YOUR EYES HERE ON THE MONKEY </div>
<hr>
<br>
<br>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem doloremque molestiae delectus asperiores, eaque totam? Dicta deleniti repelr vel duptates mollitia rem doloremque excepturi reprehenderit fugit exercitationem incidunt. Non deleniti beatae fuga fugit culpa aliquam fugiat error provident facere quo soluta porro accusamus qui sed assumenda, alias excepturi ratione minus voluptates vel aspernatur cum doloribus sapiente. Libero, consequatur quam at quos quae rem.
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem doloremque molestiae delectus asperiores, eaque totam? Dicta deleniti repelr vel duptates mollitia rem doloremque excepturi reprehenderit fugit exercitationem incidunt. Non deleniti beatae fuga fugit </p>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem doloremque molestiae delectus asperiores, eaque totam? Dicta deleniti repelr vel duptates mollitia rem doloremque excepturi reprehenderit fugit exercitationem incidunt. Non deleniti beatae fuga fugit </p>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem doloremque molestiae delectus asperiores, eaque totam? Dicta deleniti repelr vel duptates mollitia rem doloremque excepturi reprehenderit fugit exercitationem incidunt. Non deleniti beatae fuga fugit </p>
</body>
</html>
<!-- end snippet -->
