Я немного изменил твой код. это содержимое вашего тега script:
<script>
$(document).ready(function() {
var scrollHandler = function () {
console.log(Date(), ' page scrolled ');
refresh('.fadein');
};
function refresh(cls) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// you're at the bottom of the page, so remove the event handler.
$(window).off("scroll", scrollHandler);
}
$(cls).each( function(el) {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
var delay = 0;
var time = 2000;
var animation = {};
if ($(this).data('fadewidth') != undefined) {
animation.width = $(this).data('fadewidth');
}
if( bottom_of_window > bottom_of_object - ($(window).height()*0.25) ) {
setTimeout(function () {
$(this).animate(animation, time);
}.bind(this), delay);
}
});
};
$(window).scroll(scrollHandler);
refresh('.fadein');
});
</script>
Я удаляю обработчик событий, когда пользовательская прокрутка достигает нижней части страницы.
Но в вашем коде по-прежнему есть некоторые проблемы:
if( bottom_of_window > bottom_of_object - ($(window).height()*0.25) ) {
setTimeout(function () {
$(this).animate(animation, time);
}.bind(this), delay);
}
Здесь вы устанавливаете эту анимацию слишком много раз, чтобы даже после того, как пользователь достигнет дна и удалил обработчик событий, анимации по-прежнему остаются для выполнения.
Это происходит потому, что вы уже установили ихдо. Так что, если вы подождете некоторое время, когда все будет выполнено, страница перестанет прокручиваться вверх.
Обратите на это внимание и измените способ настройки анимации таким образом, чтобы она выполнялась только для одного деления за раз.