Событие при появлении объекта в зоне видимости?

Question

[el_prophettino]

Есть некоторые элементы, которые должны выполнять анимацию, только когда опуститься до них окно по скроллу.
Т.е. событие при появлении в зоне видимости. Как отследить?

Answer 1

[devstudent]

надо измерять высоту окна, расстояние от верха окна до вашего элемента, путь пройденый скроллом , и если позиция вашего элемента + небольшой зазор (иначе срабатывать будет как только первый пиксель элемента появится из-под нижнего края окна браузера и анимации не будет заметно, она произойдет внизу ) в пикселях меньше чем расстояние пройденное скроллом + высота окна, то значит он видим на экране, можно с ним делать анимацию или еще что там

$(document).ready(function(){
			$(document).bind("scroll",function(){
				$(".scroll-appear").each(function(){
					var position = $(this).offset().top;
					var classToBeAdded = "visible";
					
					if (position+150 < $(window).scrollTop() + $(window).height()){
						$(this).addClass(classToBeAdded);
					}
					
					
					if (position+$(this).height()+600 < $(window).scrollTop() + $(window).height()){
								$(this).removeClass(classToBeAdded);
					}
						
					
				});
			});
		});

Answer 2

[Алексей Шашенков]

При загрузке (Ну если не динамический контент, который меняется сам по себе, тогда надо при каждом изменении обновлять данные), получить координаты (высоты от начала страницы и самого элемента ну и ссылку на сам элемент) всех интересующих вас элементов и положить в массив объектов. При скролле, пробегаться по массиву и находить интересующие вас элементы, которые входят в область видимости.