Помочь разобраться с scroll функцией?

Question

Alibek Kulseitov @AlibekKulseitov

Люблю верстать и писать музыку

JavaScript

Помочь разобраться с scroll функцией?

Вообщем я использую animate.css для того чтобы реализовать анимацию на сайте.
Анимация у меня срабатывает так: допустим у нас есть блок class="service" , что на русском значит "Услуги".
В этом блоке у нас есть например 6 блоков , в каждой из них картинка и текст.
Думаю многие знают как использовать animate.css. ? Возьмем такой способ , используя метод добавления класса animated к блоку "SERVICE". И при обновлений страницы блоки будут анимированы.
У меня есть функция SCROLL. Которая работает так, при скооллинге вниз пока вы не дойдете верхушкой экрана до этого блока анимация работать не будет.

Что мне нужно?
Я пытаюсь сделать чтобы animatedIn запускался тогда, когда экран монитора своей нижней частью залезал на на 30-40% на нужный блок где будет анимация. Сейчас в же в этом коде анимация запускается тогда, когда верхняя часть монитора косается блока и тогда animatedIn идет.

if(mobile != null) {
$('html').css('width', window.innerWidth + 'px');
} else {
$(".scroll").each(function() {
var block = $(this);
$(window).scroll(function() {
var top = block.offset().top;
var bottom = block.height()+top;
top = top - $(window).height();
var scroll_top = $(this).scrollTop();
var block_center = block.offset().top + (block.height() / 2);
var screen_center = scroll_top + ($(window).height() / 2);
if(block.height() < $(window).height()) {
if ((scroll_top > (top-(block.height()/2))) && ((scroll_top < bottom+(block.height()/2))) && (scroll_top + $(window).height() > (bottom-(block.height()/2))) && (scroll_top < (block.offset().top+(block.height()/2)))) {
if (!block.hasClass("animated")) {
block.addClass("animated");
block.trigger('animateIn');
}
} else {
if((block.offset().top + block.height() < scroll_top) || (block.offset().top > (scroll_top + $(window).height()))) {
block.removeClass("animated");
block.trigger('animateOut');
}
}
} else {
if ((scroll_top > top) && (scroll_top < bottom) && (Math.abs(screen_center - block_center) < (block.height() / 4))) {
if (!block.hasClass("animated")) {
block.addClass("animated");
block.trigger('animateIn');
}
} else {
if((block.offset().top + block.height() < scroll_top) || (block.offset().top > (scroll_top + $(window).height()))) {
block.removeClass("animated");
block.trigger('animateOut');
}
}
}
});
});
$('head').append('');
}