Scroll Javascript in div and catch title

Question

Let’s get down to the problem:

I have the following code:

<span id="título">teste1</span>
<div id="div_scroll">
  <div id="dv1">teste1</div>
  <div id="dv2">teste2</div>
  <div id="dv3">teste3</div>
  <div id="dv4">teste4</div>
...
</div>

Suppose you have a lot of testing Ivs in there and the div id "div_scroll" and the div id 'dv1' is the top. I would like when to scroll down or rotate the div id "div_scroll" scroll and when each div id "dv?" get to the top, throw the text into it for the spam id title. I searched and found some plugins that do this. But I believe you have some simpler way to do that.

Answer 1

Example using jQuery:

$(document).ready(function() {
  
  // Escuta o movimento do scrool.
  $('#div_scroll').scroll(function() {
    // Obtem a posição do elemento div_scroll na tela.
    var divScrollPosition = $('#div_scroll').position();

    clearTimeout($.data(this, 'scrollCheck'));

    // Função executada ao concluir o movimento de scrool.
    $.data(this, 'scrollCheck', setTimeout(function() {

      // Pecorre todas as sub divs e verifica qual a sua posição.
      $('#div_scroll div').each(function() {
        var divPosition = $(this).position();

        /* (Posição do elemento div_scroll - (Posição da div + 1)) + Altura da div.
           + 1: Como a div tem um borda de 1px é somado mais 1 para discontar essa borda.
           altura da div: Utilizado para exibir o título da div enquanto a mesma estiver visível */
        var position = (divPosition.top - (divScrollPosition.top + 1)) + $(this).height();

        // Se posição maior que zero indica que a mesma ainda está visível.
        if (position > 0) {
          $('#titulo').text($(this).text());
          return false;
        }
      });
      
    }, 250));
  });
});

#div_scroll {
  border: 1px solid red;
  height: 100px;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="titulo">teste1</span>
<div id="div_scroll">
  <div id="dv1">teste1</div>
  <div id="dv2">teste2</div>
  <div id="dv3">teste3</div>
  <div id="dv4">teste4</div>
  <div id="dv5">teste5</div>
  <div id="dv6">teste6</div>
  <div id="dv7">teste7</div>
  <div id="dv8">teste8</div>
  <div id="dv9">teste9</div>
  <div id="dv10">teste10</div>
  <div id="dv11">teste11</div>
  <div id="dv12">teste12</div>
</div>

Reference on scrollstop: http://gabrieleromanato.name/jquery-check-if-users-stop-scrolling