Манипуляции с элементом, когда он появляется в поле зрения по центру?

#html #jquery #css #веб_программирование

Сейчас код такой:

function aboutUsAmination() {
    $(window).scroll(function () {

        var aboutUs = $('.about_us');
        var top = $(aboutUs).offset().top;
        var scrollFromTop = $(window).scrollTop();
        if (scrollFromTop >= top) {
          console.log("Hello")
        }

    });

};


В консоль выводится сообщение когда мы непосредственно доскролили до блока(то есть,
он в самом верху экрана). Мне нужно, что бы хотя бы когда он по середине экрана. Можно
вычислить точное число и отнимать его от top, но это нужно будет отнимать для каждого
разрешения экрана. 

И так: Как вывести в консоль сообщение, когда блок по вертикали по центру, а не вверху
    

Ответы

Ответ 1

Для этого - скорректруйте scrollFromTop на половину высоты окна, а top - на половину
высоты блока:

function aboutUsAmination() {
    $(window).scroll(function () {
        var aboutUs = $('.about_us');
        var top = $block.offset().top + $block.outerHeight() / 2;
        var scrollFromTop = $(window).scrollTop() + $(window).height() / 2;
        if (scrollFromTop >= top) {
          console.log("Hello")
        }
    });
};


При таком варианте - сообщение в консоли вы увидите, когда середина блока окажется
по вертикали посередине, или выше.

Рабочий пример на jsfiddle