4

В самом низу страницы имеется баннер. При открытии страницы его не видно, чтобы его увидеть требуется прокрутить страницу.
Можно ли определить, что страница была прокручена до уровня видимости баннера и послать сигнал PHP-скрипту (т.е. засчитать просмотр баннера)?

1
  • 2
    добавить обработчик scroll: $(window).scroll(function(){ /* тут проверить видимость */ }
    – Stack
    20 янв 2016 в 16:59

2 ответа 2

3
<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>
7
  • Как бы его заставить посылать сигнал только один раз? срабатывает повторно при малейшей прокрутке страницы.
    – Plush
    20 янв 2016 в 21:35
  • @Plush "Как бы его заставить посылать сигнал только один раз?" -- если баннер был показан и был послан сигнал, то можно установить флаг/атрибут и при следующей прокрутке проверять этот флаг.
    – Stack
    20 янв 2016 в 21:40
  • @Plush добавил в ответ.
    – Stack
    20 янв 2016 в 21:44
  • Еще заметил, что когда баннер попал в поле зрения и сигнал послан, то при обновлении страницы (браузер оставит скролл на том же месте что и до обновления страницы, то есть баннер попадает в поле зрения автоматом) сигнал не посылается, разве что пользователь прокрутит страницу хотя бы на 1px. Можно как-то послать сигнал в этом случае? $(window).scrollTop($(window).scrollTop() + 1); - прокрутить получилось, но вызвать $(window).scroll() чтобы послать сигнал не получается.
    – Plush
    29 янв 2016 в 10:39
  • @Plush "при обновлении страницы (браузер оставит скролл на том же месте что и до обновления страницы, то есть баннер попадает в поле зрения автоматом" -- надо при загрузке страницы проверить isVisible. для этого проверку надо добавить в $(function() { }); сразу после {
    – Stack
    29 янв 2016 в 11:18
1

Если проверять надо после загрузки страницы и во время скролла, то так:

<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>
2
  • Пытаюсь еще добавить проверку b.find("img").load(function() { сразу после ` var b = $("#banner");` чтобы проверить что баннер загрузился, но сигнал посылается только при перезагрузке страницы, при скроллинге ничего.. У меня внутри контейнера div#banner есть текст и картинка-баннер.
    – Plush
    2 фев 2016 в 9:33
  • 1
    @Plush "Пытаюсь еще добавить проверку b.find("img").load(...)" -- может не вызываться, т.к. рис. к этому моменту уже загружен. проверить можно так if(myImg.complete) { ... }
    – Stack
    2 фев 2016 в 9:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.