How to capture the id of each line in a list with scroll?

Asked

Viewed 75 times

0

I have a list of 200 lines, and each line has its id.

I would like to capture with javascript, the id of each line when scrolling down the page.

The list is assembled this way:

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

Trying to put it another way.

I set up an array, in which, each entry represents a row of my list. In each input there are two fields, one with line height and the other with line id.

It’s like this:

var lists = [ [45, 'news'], [50,'technology'], [100, 'world''] ];

With each scroll on the page, the program captures the body height, and with the body height value, it analyzes which field I am in the array

Solution:

I managed using this function:

$(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]);
        }
    }
});
javascript
  • 1

    What is the HTML of this list? No need to put the 200.

  • I captured the line heights and id’s in an array array_altura_lines, hence using $(window). on("scroll resize", Function() {}, I would like to compare the height of the "body" with the row array_altura_line and know which index it fits into

  • The ids I have already captured and are in an array, each member of the array has two fields, one with line height and the other with id

  • So I would like with the scroll, to see the height of the body (I already did this, in an altura_body variable), with this value of the altura_body it should scan this array in the field of line heights, and find in which index it is

  • I want the id of the list on the screen to appear in a div

  • I rewrote the question, see if I can make it clearer

  • Just the name of the id on the screen, you know? When I descend the panel and arrive in the field of "technology", it appears in the field that I am in the line of "technology"

  • that! Explaining otherwise: I have a variable x = 55, how to compare with this array var lists = [ [45,'news'], [50,'technology'], [100, 'world'] ]; and see which index it fits into

  • With this array construction is complicated. Could make an object.

  • You need to edit the question and explain everything right. It’s confusing. The code I have ready. The ids will appear in the console as the list items appear, but tb appear the ids of the ones that are already visible.

  • Thanks man, I’ll try to rewrite to see if it gets clearer, but thanks for the help

Show 6 more comments

1 answer

1


I did this way with pure JS, since the jQuery tag was not marked (explanations in the code):

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>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.