Как сделать так, что бы блоки одинаково появлялись на разных экранах исходя из значения скрола?

Question

[Дима Паутов]

Все привет! Может вопрос был немного не точен, но постараюсь описать свою проблему!

У меня есть шаблон и я, в зависимости от прокрутки, присваиваю элементам классы с анимациями.
Пример: Прокрутил 300px, дай блоку "А" такой-то класс. Все отлично работает.

вот пример кода:

$(window).scroll(function() { 
if ($(this).scrollTop() >= 300){
$('.block').addClass('animation');
}
});

А вот если я делаю экран меньше(в высоту), то прокручивая 300px я блок не вижу, т.к. визуально я до него не докрутил, окошко же маленькое, но ему присвоились классы анимаций и в итоге эффекта никто не увидел.

Подскажите, как быть?

Answer 1

[Евгений Петров]

$(window).on('scroll', f);
$(window).on('resize', f);
function f() {
// Пересчитываем
}

Вот пример codepen.io/cleric/pen/AzoIi

Comments

[Дима Паутов]

Как бы да, я тоже до этого додумался, но сама формула, по которой нужно это рассчитывать, у меня не получается!

[exmmo]

вероятно нужно использовать $(window).height() как базисную единицу

[Евгений Петров]

@exmmo или просто посмотреть пример