есть div .invest для которого написан скрипт. как сделать, чтобы скрипт выполнялся только когда пользователь доходит до этого div'a на странице?
3 ответа
Если речь идёт о скролинге страницы, то можно расчитать к примеру таким образом:
var elem = document.getElementsByClassName('invest');
var sourceBottom = elem[0].getBoundingClientRect().bottom + window.pageYOffset;
window.onscroll = function() {
if (window.pageYOffset < sourceBottom) {
alert("Вижу див");
}
};
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);
});
Поместите код скрипта в тэге <script>...</script>
после нужного вам div'а.
-
1
-
-
1Плохой совет. В таком случае этот скрипт вызовется в тот момент, когда div будет загружен браузером, но не когда пользователь дойдёт до него.– edem30 авг 2016 в 10:24
-
-