Динамическое обновление контента при скролинге

Хелп! Третий день как не могу решить задачу, есть код, рандомно выводит содержимое из фаила test.php в диве id="test"
var a, r, p; a = ["1", "2", "3", "4"]; r = Math.floor(Math.random() * a.length); p = new XMLHttpRequest(); p.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var myObj = JSON.parse(this.responseText); l = ( a[r] ); $("#test").html(myObj[l]); } }; p.open("GET", "test.php", true); p.send();
Задача: Как обновить содержимое дива id="test" в тот момент как только он скролом в низ документа, вышел из видимой зоне. Какие идеи?

Ответ

Решил задачу, не идеал... но работает. Спасибо MedvedevDev за направление. Само решение:
var a, r, p; a = ["1", "2", "3", "4"]; r = Math.floor(Math.random() * a.length); p = new XMLHttpRequest(); p.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var myObj = JSON.parse(this.responseText); l = ( a[r] ); $("#test").html(myObj[l]); } }; var elmt = document.getElementsByClassName('test'); var pageBottom = elmt[0].getBoundingClientRect().bottom + window.pageYOffset; window.onscroll = function() { if (window.pageYOffset > pageBottom) { p.open("GET", "test.php", true); p.send(); } };