Сообщение от Kostushko
|
|
Подскажите, можно ли запустить функцию по событию, когда нужный элемент виден в окне браузера?
|
Может быть немного не в тему, но всё же.
Скрипт определяет при каждом (на самом деле не при каждом) "скролле" экрана элементы, находящиеся в зоне видимости пользователя.
Осторожно jQuery:
var timer = 0,
//"самописный" селектор выбирает все элементы на экране, между "верхом" и "низом"
//(горизонтаьная прокрутка не учитывается, но можно дописать по-аналогии)
(function(){
$.belowthefold = function(element) {
var fold = $(window).height() + $(window).scrollTop();
return fold <= $(element).offset().top;
};
$.abovethetop = function(element) {
var top = $(window).scrollTop();
return top >= $(element).offset().top + $(element).height();
};
$.inviewport = function(element) {
return !$.belowthefold(element) && !$.abovethetop(element);
};
$.extend($.expr[':'], {
"inViewport": function(a){return $.inviewport(a);}
});
})(),
handler = function(){
var inViewportList = $('div:inViewport'); //набор элементов, видимых в окне браузера
//делайте с ними что хотите
//ваш код
};
handler();
//вызывает "handler" с задержкой (500 мс) после "каждого скролла"
//если успел прокрутить дальше, то обрабатывается только "второй скролл" и т.д.
//очень удобно - меньше вычислений - меньше нагрузка на браузер
$(window).scroll(function(){
if(timer){
clearTimeout(timer);
timer = 0;
}
timer = setTimeout(handler, 500);
});
