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

Question

[Nikita Shchypylov]

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

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, но это нужно будет отнимать для каждого разрешения экрана.
И так: Как вывести в консоль сообщение, когда блок по вертикали по центру, а не вверху

Answer 1

[CyberHost]

...
if (scrollFromTop >= (top - $(window).height() / 2)) { 
     console.log("Hello")
}
...

Пример

Comments

[Nikita Shchypylov]

Как вариант, но на 4к это не будет серединой:(

[Nikita Shchypylov]

Стоп. Тогда совсем перепрыгиваем. Нужно же top уменьшить. Минус наверное?

[CyberHost]

Nikita Schipilov: это ровно центр

[Nikita Shchypylov]

CyberHost: if (scrollFromTop >= (top - aboutUs.height() / 2)) - это будет центр

[CyberHost]

Nikita Schipilov: добавил линию центра в примере. Посмотри пример еще раз

[Nikita Shchypylov]

CyberHost: идея была не в том, что бы элемент в .about_us был по центру, а что бы сам .about_us был по центру по оси Y

[CyberHost]

Nikita Schipilov: ну ты серьезно? элемент добавил только чтобы показать где центр. ну посмотри в код пожалуйста. Ивент на .about_us, когда скролим до центра .about_us срабатывает ивент

[Nikita Shchypylov]

CyberHost: ты все таки не понял. Смотри, есть брать сейчас твое поведение, то выйдет вот так: joxi.ru/xAeYkJKfxZegAy. Стрелка указывает на блок about_us. То есть, мы проскролили половину блока и потом сработала анимацаия. Мне же нужно так: joxi.ru/eAOeJl9Uj7nbmo. Когда сам блок по центру. Если в твоем коде ставлю минус получается то, что я хочу

[CyberHost]

Nikita Schipilov: ну так надо написать в вопросе: "... когда начало блока .about_us будет по центру".
В таком случае да, минус

[CyberHost]

Nikita Schipilov: ну и там естественно ".. - $(window).height() .."

[CyberHost]

Nikita Schipilov: добавил в пример еще маркер синий для наглядности

[Nikita Shchypylov]

CyberHost: Плохо сформулировал, согласен. Спасибо за помощь!

Answer 2

[Ксения Михайлова]

Я пользовалась skrollr https://github.com/Prinzhorn/skrollr#relative-mode...