Making Data-type Breadcrumb from a <li> Scrolling Down Page

Question

Can someone help me with that.

I have the page and html which is a giant list.

Each < li> has a date field in it

<li class="classe_dia" data-dia="12">Conteúdo</li>
<li class="classe_dia" data-dia="13">Conteúdo</li>
<li class="classe_dia" data-dia="14">Conteúdo</li>
<li class="classe_dia" data-dia="15">Conteúdo</li>

When scrolling the page I would like to capture the date-day of the element that is at the 150px height of $(window). scrollTop()

Codepen: https://codepen.io/alemoraesra/pen/eXjdyx

Answer 1

   var $topOffset = [],
	$section = $('.classe_dia');

$(window).resize(function() {
  $topOffset = [];
  $.each($section, function() {
$topOffset.push($(this).offset().top);
  });
}).trigger('resize');

$(window).scroll(function() {
var $browserTop = $(window).scrollTop();

$.each($section, function(i) {
	if (($browserTop >= $topOffset[i]) && ($browserTop < $topOffset[i] + $(this).height())) {
		var result = $(this).attr('data-dia');
 $('#resultado').text(result);

	}
});
}).trigger('scroll');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li class="classe_dia" data-dia="12">Conteúdo</li>
<li class="classe_dia" data-dia="13">Conteúdo</li>
<li class="classe_dia" data-dia="14">Conteúdo</li>
<li class="classe_dia" data-dia="15">Conteúdo</li> 

With this script I get the value of the LI element that is at the same height of scrollTop. I hope to have helped you!