0

Alguém pode me ajudar nisso.

Eu tenho a página e html que é uma lista gigante.

Cada < li> tem um um campo de data nele

<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>

Ao dar scroll na página gostaria de capturar o data-dia do elemento que estiver na altura 150px do $(window).scrollTop()

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

1 Resposta 1

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> 

Com esse script eu pego o valor do elemento LI que estiver na mesma altura do scrollTop. Espero ter lhe ajudado!

2
  • Olá João Victor, eu quero fazer um breadcrumb de uma lista que eu tenho, eu tentei reproduzir neste codepen codepen.io/alemoraesra/pen/eXjdyx, não deu bem certo, depois que chega no fim ele não altera mais 18/03/2019 às 22:40
  • 1
    Opa. Consegui resolver, o novo código ta no mesmo lugar de antes 19/03/2019 às 1:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .