В самом низу страницы имеется баннер. При открытии страницы его не видно, чтобы его увидеть требуется прокрутить страницу.
Можно ли определить, что страница была прокручена до уровня видимости баннера и послать сигнал PHP-скрипту (т.е. засчитать просмотр баннера)?
-
2добавить обработчик scroll: $(window).scroll(function(){ /* тут проверить видимость */ }– StackCommented 20 янв. 2016 в 16:59
Добавить комментарий
|
2 ответа
<div id="banner"
style="margin-top:1000px; height: 30px; width:100px; background-color: red;" />
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
function isVisible(tag) {
var t = $(tag);
var w = $(window);
var wt = w.scrollTop();
var tt = t.offset().top;
var tb = tt + t.height();
return ((tb <= wt + w.height()) && (tt >= wt));
}
$(function () {
$(window).scroll(function () {
var b = $("#banner");
if (!b.prop("shown") && isVisible(b)) {
b.prop("shown", true);
alert("послать сигнал");
}
});
});
</script>
-
Как бы его заставить посылать сигнал только один раз? срабатывает повторно при малейшей прокрутке страницы.– PlushCommented 20 янв. 2016 в 21:35
-
@Plush "Как бы его заставить посылать сигнал только один раз?" -- если баннер был показан и был послан сигнал, то можно установить флаг/атрибут и при следующей прокрутке проверять этот флаг.– StackCommented 20 янв. 2016 в 21:40
-
-
Еще заметил, что когда баннер попал в поле зрения и сигнал послан, то при обновлении страницы (браузер оставит скролл на том же месте что и до обновления страницы, то есть баннер попадает в поле зрения автоматом) сигнал не посылается, разве что пользователь прокрутит страницу хотя бы на
1px
. Можно как-то послать сигнал в этом случае?$(window).scrollTop($(window).scrollTop() + 1);
- прокрутить получилось, но вызвать$(window).scroll()
чтобы послать сигнал не получается.– PlushCommented 29 янв. 2016 в 10:39 -
@Plush "при обновлении страницы (браузер оставит скролл на том же месте что и до обновления страницы, то есть баннер попадает в поле зрения автоматом" -- надо при загрузке страницы проверить
isVisible
. для этого проверку надо добавить в$(function() { });
сразу после{
– StackCommented 29 янв. 2016 в 11:18
Если проверять надо после загрузки страницы и во время скролла, то так:
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
function isVisible(tag) {
var t = $(tag);
var w = $(window);
var wt = w.scrollTop();
var tt = t.offset().top;
var tb = tt + t.height();
return ((tb <= wt + w.height()) && (tt >= wt));
}
function signal() {
var b = $("#banner");
if (!b.prop("shown") && isVisible(b)) {
b.prop("shown", true);
alert("послать сигнал");
}
}
$(function () {
signal();
$(window).scroll(signal);
});
</script>
-
Пытаюсь еще добавить проверку
b.find("img").load(function() {
сразу после ` var b = $("#banner");` чтобы проверить что баннер загрузился, но сигнал посылается только при перезагрузке страницы, при скроллинге ничего.. У меня внутри контейнераdiv#banner
есть текст и картинка-баннер.– PlushCommented 2 февр. 2016 в 9:33 -
1@Plush "Пытаюсь еще добавить проверку b.find("img").load(...)" -- может не вызываться, т.к. рис. к этому моменту уже загружен. проверить можно так
if(myImg.complete) { ... }
– StackCommented 2 февр. 2016 в 9:49