@hibinyru

Как правильно при появлении на экране браузера блока div (их несколько) вызывать ajax?

Господа, приветствую.

Не могу победить тривиальную задачу, гугл не помог :( :

Дано: на странице несколько блоков вида <div id="idXXX"></div>

Задача: при прокрутке страницы , если блок в видимой пользователю части экрана браузера - вызывать скрипт ajax (помечать прочитанным)

Пытаюсь это решить с помощью jquery, не могу победить :( Буду рад помощи, заранее спасибо.

В идеале еще бы так, чтобы второй раз не вызывалась одна и та же функция

Наброски:
function inWindow(s)
    {
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    var currentEls = $(s);
    var ids=s;
    var offset = currentEls.offset();
    if(scrollTop <= offset.top && (currentEls.height() + offset.top) < (scrollTop + windowHeight))
      {
      /*
      $.ajax({
           url:  "status.php?admin='.$admin.'&id=" + ids + ""  // не работает
          });
      */
      console.log("Блок "+ids+" в области видимости");
      }
    }

  $(document).scroll(function ()
    {
    inWindow("#id1'")
    });
  $(document).scroll(function ()
    {
    inWindow("#id2'")
    });
  $(document).scroll(function ()
    {
    inWindow("#id3'")
    });
  $(document).scroll(function ()
    {
    inWindow("#id4'")
    });
  $(document).scroll(function ()
    {
    inWindow("#id5'")
    });
  
.active
  {
  height:300px;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="id1" class="active"></div>

<div id="id2" class="active"></div>

<div id="id3" class="active"></div>

<div id="id4" class="active"></div>

<div id="id5" class="active"></div>
  • Вопрос задан
  • 29 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы