How do I execute a scrip only after it is visible to the user?

Asked

Viewed 52 times

0

I have this script:

var count = document.getElementById('contador').innerText;
var temp = count - 1000;
function counting() {
    if(temp<count) {
        setTimeout(function(){
            document.getElementById('contador').innerText = temp;
            temp=temp+10;
            counting();
        }, 30);
    }else {
        setTimeout(function(){
            document.getElementById('contador').innerText = count;
        }, 30);
    }
}

/////////////////////////////////////

$(function(){
    let run = false
  let alturaContador = $('#contador').height()
    let distanciaContadorDoTopo = $('#contador').offset().top

  $(window).scroll(function(){
    let posicaoScroll = $(window).scrollTop()

    if (posicaoScroll >= (distanciaContadorDoTopo - (distanciaContadorDoTopo / 2)) && !run) {
    run = true
    alert('RODAR NÚMEROS')
      counting();
    }

  });
});

That I am trying to get it to run only after the user sees (When the user scrolls up to the element) it, however unsuccessfully, someone has some suggestion?

Example: this site > convergenciasjc.com.br has these numbers (+ DE 552000 HOURS) "running" but usr does not see why they load with website.

<ul id="certificado">                       

 <li class="conteudo_certificado">
    <span class="titulo_number">+ de</span><span id="contador" class="titulo_number count">950</span>
    <br>
    <span class="titulo_certificado">toneladas coletadas</span>
 </li>

</ul>
javascript html jquery css

  • Edit the question and also put the HTML/CSS so that we can simulate its context. It will help you answer, it doesn’t need to be the html and css of the full page, but at least of this piece so that to test

  • Be clearer, after "he sees". How do you know that he saw? does he perform any action when he "sees"?? What is the point of waiting for him to see? he clicks on some button signaling that he saw?

  • "only after the user sees it" he who? the way he wrote so the user has q see the script, and it doesn’t happen

1 answer

0


Run it and see if it helps you 

$(document).ready(function(){
   $(window).on('scroll', function() {
      $('.scroll-aparecer').stop();
      if($(this).scrollTop() > 200) {
      // aqui ele vai executar o que você deseja, nesse caso mostrar uma tarja preta
         $('.scroll-aparecer').animate({
            height:"100px"
         }, 1000); /*Defina aqui o tempo em milisegundos */
      }else{
         $('.scroll-aparecer').animate({
         height:"0"
         }, 1000); /*Defina aqui o tempo em milisegundos */
      }
   });
});
.geral-boxes{
   width: 100%;
   float: left;
}
.acao1,.acao2,.acao3{
   width: 100%;
   float: left;
   height: 500px;
}
.acao1{
   background-color: #fff;
}
.acao2{
   background-color: #fff;
}.acao3{
   background-color: #fff;
}
.geral-boxes{
   width: 100%;
   float: left;
}

.scroll-aparecer{
   width: 50px;
   float: left;
   height: 0;
   background-color: #000;
   
   position: fixed; top: 0; left: 0; z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="acao1">AQUI ELE VIU E ROLOU PARA BAIXO</div>

<div class="acao2"></div>

<div class="acao3"></div>

<div class="scroll-aparecer"></div>

  • My gave more direction, thank you!

Browser other questions tagged javascript html jquery css

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