1

Всем добрый день! Нашел в интернете функцию отслеживания появление блока на экране по классу. Но вопрос такой у меня несколько таких блоков, и необходимо получить id показываемого блока в данный момент. Буду рад если кто-то поможет! Спасибо!

var block_show = null;

function scrollTracking() {
  var wt = $(window).scrollTop();
  var wh = $(window).height();
  var et = $('.active').offset().top;
  var eh = $('.active').outerHeight();

  if(wt + wh >= et && wt + wh - eh * 2 <= et + (wh - eh)) {
    if (block_show == null || block_show == false) {
      console.log('Блок active в области видимости');
    }
    block_show = true;
  } else {
    if(block_show == null || block_show == true) {
      console.log('Блок active скрыт');
    }
    block_show = false;
  }
}

$(window).scroll(function() {
  scrollTracking();
});

$(document).ready(function() {
  scrollTracking();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="active">Active</div>

3
  • несколько таких блоков - вы имеете ввиду несколько разных классов, или же это все идентификаторы id?
    – rabbit
    23 июл 2020 в 8:46
  • и получить id показываемого блока, вы имеете ввиду атрибут id у идентификатора, или дочерний номер блока в родительском контейнере?
    – rabbit
    23 июл 2020 в 8:49
  • @sergeykuznetsov Одинаковый классов , у которые разные id, при этом они добавляются путем ajax пагинации 23 июл 2020 в 9:41

1 ответ 1

0

Если Вы хотите отслеживать ID текущего блока, который находиться в области видимости, то:

let block_show = null
let current_block_id = null

function scrollTracking() {
  const wt = $(window).scrollTop()
  const wh = $(window).height()
  const active = $(".active")
  const et = active.offset().top
  const eh = active.outerHeight()

if (wt + wh >= et && wt + wh - eh * 2 <= et + (wh - eh)) {
    if (block_show == null || block_show == false) {
      console.log("Блок active в области видимости")
    }
    block_show = true
    current_block_id = active.attr("id")
    console.log("ID: " + current_block_id)
  } else {
    if (block_show == null || block_show == true) {
      console.log("Блок active скрыт")
    }
    block_show = false
    current_block_id = null
  }
}

$(window).on("scroll", function() {
  scrollTracking()
})

$(document).ready(function() {
  scrollTracking()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="active" id="id12345">Active</div>

1
  • А если id="idХХХ" таких блоков много, как быть?
    – hibinyru
    29 апр 2021 в 11:54

Ваш ответ

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

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