0

Tenho uma lista com 200 linhas, e cada linha tem o seu id.

Gostaria de capturar com o javascript, o id de cada linha ao descer a página.

A lista está montada deste jeito:

<ol id="noticias">
    <li id="geral" class="area">
      Conteudo
    </li>
    <li id="esportes" class="area">
      Conteudo
    </li>
    <li id="mundial" class="area">
      Conteudo
    </li>
    <li id="tecnologia" class="area">
      Conteudo
    </li>
</ol>

Tentando explicar de outra forma.

Eu montei uma array, na qual, cada entrada representa uma linha da minha lista. Em cada entrada existem dois campos, um com a altura da linha e outro com o id da linha.

Está assim:

var listas = [ [45,'noticias'], [50,'tecnologia'], [100, 'mundo'] ];

A cada scroll que desse na página, o programa captura a altura do body, e com o valor da altura do body, ele analisa em qual campo estou no array

Solução:

Eu consegui utilizando esta função:

$(window).on("scroll resize", function() {

    var altura_body = $(window).scrollTop();

    for (var i = 0; i <= numero_de_linhas; i++) {
        if (altura_body >= listas[i][0] && altura_body <= listas[i + 1][0]) {
            $(".mostra_id").html(listas[i][1]);
        }
    }
});
11
  • 1
    Como é o HTML dessa lista? Não precisa colocar as 200.
    – Sam
    Commented 30/06/2018 às 1:39
  • eu capturei as alturas das linhas e os id's em um array array_altura_linhas, daí usando o $(window).on("scroll resize", function() {}, eu gostaria de comparar a altura do "body" com a array_altura_linha e saber em qual index ele se encaixa Commented 30/06/2018 às 2:15
  • As ids eu já capturei e estão numa array, cada membro da array tem dois campos, um com a altura da linha e outro com o id Commented 30/06/2018 às 2:20
  • Então gostaria com o scroll, ver a altura do body (já fiz isso, numa variável altura_body), com esse valor do altura_body ele deveria fazer uma varredura nessa array no campo das alturas das linhas, e achar em qual index ele está Commented 30/06/2018 às 2:23
  • Eu quero que o id da lista que está na tela apareça numa div e mude confforme eu for descendo a página Commented 30/06/2018 às 2:28

1 Resposta 1

1

Fiz desta forma com JS puro, já que não foi marcado a tag jQuery (explicações no código):

document.addEventListener("scroll", function(){
   var lista = document.querySelectorAll("#noticias li");
   for(var x=0; x<lista.length; x++){
      var elTopo = lista[x].offsetTop; // distância relativa do elemento ao topo
      var scrlTopo = window.pageYOffset; // scroll da janela
      var altJanela = window.innerHeight; // altura da janela
      var distance = elTopo-scrlTopo; // distância absoluta do elemento ao topo
      if(distance <= altJanela){ // verifico se o elemento apareceu na janela
         document.querySelector(".mostra_id").innerHTML = lista[x].id;
      }else if(lista[0].offsetTop-scrlTopo >= altJanela){ // se o primeiro elemento da lista sumir
         document.querySelector(".mostra_id").innerHTML = ''; // apaga o conteúdo da div
      }
   }
});
.mostra_id{
   position: fixed;
   top: 30px;
   color: red;
}
<div class="mostra_id"></div>
Role a tela
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<ol id="noticias">
    <li id="geral" class="area">
      geral
    </li>
    <li id="esportes" class="area">
      esportes
    </li>
    <li id="mundial" class="area">
      mundial
    </li>
    <li id="tecnologia" class="area">
      tecnologia
    </li>
</ol>

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 .