Как отследить появление элемента в области видимости браузера?

Question

[Вячеслав]

Здравствуйте. Верстаю сайт - template.promo-gear.itembridge.com
Нужно запустить функцию, когда будет видимый блок с кружками на странице (3 страница).
Пробовал делать через плагин appear.js, но он не работает корректно, запускается не тогда, когда надо, и ошибки в консоли появляются...

Какие идеи?

Comments

[dfire]

upshots.org/javascript/jquery-test-if-element-is-i...

Answer 1

[animhotep]

function come(elem) {
	var docViewTop = $(window).scrollTop(),
		docViewBottom = docViewTop + $(window).height(),
		elemTop = $(elem).offset().top,
		elemBottom = elemTop + $(elem).height();

	return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

юзать так

if (come("#section2")) {
    ...
}

сработает когда блок польностью появится

Comments

[Вячеслав]

не работает, пробовал похожий вариант... не правильно работает из-за плагина fullpage.js

[animhotep]

шта? плагин то тут причём. оно не зависит от плагинов

[Вячеслав]

притом. зайди и посмотри на мой сайт - template.promo-gear.itembridge.com
решил проблему с помощью API плагина fullpage.js, на котором строится мой сайт.
там присутствует собитие, которое возвращает индекс страницию код:

var indexAnimCircle = $('#mainCanvas').closest('.section').index();
if (nextIndex == indexAnimCircle) {
setTimeout(function(){
animProgressBar();
}, 600);

Answer 2

[dfire]

tympanus.net/Development/GridLoadingEffects/index6.html

Comments

[Вячеслав]

не то, там css анимации и плагин для красивого появления блоков на странице.
а мне нужно запустить функцию, когда блок появится на екране

Answer 3

[Вячеслав]

спасибо всем! решил проблему с помощью API плагина fullpage.js, на котором строится мой сайт.
там присутствует собитие, которое возвращает индекс страницию код:

var indexAnimCircle = $('#mainCanvas').closest('.section').index();
if (nextIndex == indexAnimCircle) {
setTimeout(function(){
animProgressBar();
}, 600);