Написал общее решение для вашей задачи, когда необходимо обработать доскроллинг.
Запускайте плагин, когда наступает ситуация "выполнения действия", или выполняйте метод плагина, который перезапускает анимацию.
<style>
#div1
{
display: block;
width: 400px;
height: 1400px;
background-color: green;
}
#div2
{
display: block;
width: 400px;
height: 400px;
background-color: red;
}
</style>
<div id="div1">
</div>
<div id="div2">
</div>
<script>
//Функция для определения необходимости выполнения действия,
//связанное с появлением элемента elem_id в видимой части документа
function SomethingToDoElem(e, elem_id)
{
var elem = document.getElementById(elem_id);
if(elem === null)
return;
//определение размера видимой части документа без JQuery
var opera = (navigator.userAgent.toLowerCase().indexOf('opera') > -1),
html = document.documentElement,
body = document.body,
w = document.compatMode=='CSS1Compat' && !opera ? html.clientWidth : body.clientWidth,
h = document.compatMode=='CSS1Compat' && !opera ? html.clientHeight : body.clientHeight;
// если величина прокрутки по вертикали + видимая высота документа
//превышает расстояние от верха документа до элемента,
// для которого требуется действие доскроллинга, то выполняем это действие
if(e.currentTarget.scrollY + h > elem.offsetTop)
{
var is_did_something = elem.getAttribute('is_did_something'); // если действие однократного применения,
//то получаем данные о том, что оно не выполнялось ранее, например, с помощью атрибута тега.
if(is_did_something === null) // атрибут не создан, значит действия не было
{
setTimeout(function(){elem.style.backgroundColor = 'blue'; }, 1000); // выполняем действие
elem.setAttribute('is_did_something', 1); // записываем, что действие выполнили
// для проверки однократности его выполнения
}
}
}
// Ловим события, для которых возможно понадобиться действие доскроллинга
// на загрузку документа, лучше использовать JQuery аналог
window.onload = function(e)
{
SomethingToDoElem(e, "div2");
}
// на прокрутку документа
window.onscroll = function(e)
{
SomethingToDoElem(e, "div2");
}
// на изменение размера окна документа, если дизайн резиновый
// и интересуемый элемент div2 может изменять в этом случае свое положение
// при ресайзе окна браузера.
// !!!: лучше не привязывать через $().on('resize', ...) криво срабатывает вызов,
// использовать только нативные способы подписки на событие.
window.onresize = function(e)
{
SomethingToDoElem(e, "div2");
}
// Также нужно вызывать SomethingToDoElem(e, "div2"); при любом динамическом изменении
// контента страницы или блока, где этот контент расположен.
</script>
