Как отследить появление элемента на экране и получить его id?

Question

Всем добрый день! Нашел в интернете функцию отслеживания появление блока на экране по классу. Но вопрос такой у меня несколько таких блоков, и необходимо получить 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(); });

Active

Vasily · Answer

Если Вы хотите отслеживать 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>

Active

Как отследить появление элемента на экране и получить его id?

One Answer

Add your own answers!

Ask a Question