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 that you have read and understand our privacy policy and code of conduct.

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