jquery - Get ID of reached area when scrolling

Question

I need the ID of the container by scrolling through the page and when the container reaches the top of the page.

My Code so far

  $(window).scroll(function(){
    if($(window).scrollTop() >= $(".category-title").offset().top){
      var cat_id = "";
}
 });

I need the Id of div.category_title

THX

question from:https://stackoverflow.com/questions/65921315/get-id-of-reached-area-when-scrolling

Answer 1

To achieve this you can use filter() and first() to retrieve the first .category-title elements which is next below the current scroll position, then prop() to get its id:

let $categoryTitles = $('.category-title');
let $output = $('#output span');

$(window).scroll(function() {
  let $topCat = $categoryTitles.filter((i, el) => $(el).offset().top > $(window).scrollTop()).first();
  $output.text($topCat.prop('id'));
}).scroll();

.category-title {
  height: 500px;
  border-bottom: 10px solid #C00;
}
#output {
  position: fixed;
  top: 5px;
  left: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="output">Id: <span></span></div>
<div class="category-title" id="A">A</div>
<div class="category-title" id="B">B</div>
<div class="category-title" id="C">C</div>
<div class="category-title" id="D">D</div>