Skip to main content
se añadieron 368 caracteres en el cuerpo
Origen Enlace
$(window).on("scroll", function(){
    if($(window).scrollTop() >= 780){
        let rangos = document.getElementsByClassName('rangos');
        for(let rango of rangos){ 
                let elRango = rango;
                let idRango = rango.getAttribute('id');
                // console.log(idRango);
                conteo(elRango, idRango);
        }
        function conteo(el, num) {
            var cont = 0;
            var id = setInterval(function(){
                el.innerHTML = cont + ' %';
                cont++;
                if(cont > num) {
                    clearInterval(id);
                }
            }, 70);
        }
    }

});

$(window).on("scroll", function() {
  if ($(window).scrollTop() >= 780) {
    let rangos = document.getElementsByClassName('rangos');
    for (let rango of rangos) {
      let elRango = rango;
      let idRango = rango.getAttribute('id');
      conteo(elRango, idRango);
    }

    function conteo(el, num) {
      var cont = 0;
      var id = setInterval(function() {
        el.innerHTML = cont + ' %';
        cont++;
        if (cont > num) {
          clearInterval(id);
        }
      }, 70);
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="90" class="rangos"> % </span>
<span id="87" class="rangos"> % </span>

$(window).on("scroll", function(){
    if($(window).scrollTop() >= 780){
        let rangos = document.getElementsByClassName('rangos');
        for(let rango of rangos){ 
                let elRango = rango;
                let idRango = rango.getAttribute('id');
                // console.log(idRango);
                conteo(elRango, idRango);
        }
        function conteo(el, num) {
            var cont = 0;
            var id = setInterval(function(){
                el.innerHTML = cont + ' %';
                cont++;
                if(cont > num) {
                    clearInterval(id);
                }
            }, 70);
        }
    }

});

$(window).on("scroll", function() {
  if ($(window).scrollTop() >= 780) {
    let rangos = document.getElementsByClassName('rangos');
    for (let rango of rangos) {
      let elRango = rango;
      let idRango = rango.getAttribute('id');
      conteo(elRango, idRango);
    }

    function conteo(el, num) {
      var cont = 0;
      var id = setInterval(function() {
        el.innerHTML = cont + ' %';
        cont++;
        if (cont > num) {
          clearInterval(id);
        }
      }, 70);
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="90" class="rangos"> % </span>
<span id="87" class="rangos"> % </span>

El titulo era confuso, cambio redaccion para que se entienda que el problema es ejecutar una funcion solo una vez, no detectar cuando un elem es visible
Origen Enlace

Ejecutar codigocódigo cuando el ScrollTop sea igual a la posicionposición de un elemento una única vez

intentoIntento hacer que un codigo se ejecute una sola vezuna sola vez cuando el scrollTopscrollTop de la pagina sea igual a la posicion de un elemento, osea cuando el elemento sea visible. 

Ya lo logre, el problema esta ahora en que cada vez que el scrollTopscrollTop es igual a la posicionposición del elemento, se ejcuta cuantas veces el usuario pasa por allise ejecuta cuantas veces el usuario pasa por allí, no quiero eso, solo quiero que se ejecute una sola vezuna sola vez cuando se cargue la pagina. 

Aqui el codigo..:

$(window).on("scroll", function(){
    if($(window).scrollTop() >= 780){
        let rangos = document.getElementsByClassName('rangos');
        for(let rango of rangos){ 
                let elRango = rango;
                let idRango = rango.getAttribute('id');
                // console.log(idRango);
                conteo(elRango, idRango);
        }
        function conteo(el, num) {
            var cont = 0;
            var id = setInterval(function(){
                el.innerHTML = cont + ' %';
                cont++;
                if(cont > num) {
                    clearInterval(id);
                }
            }, 70);
        }
    }

});

Ejecutar codigo cuando el ScrollTop sea igual a la posicion de un elemento

intento hacer que un codigo se ejecute una sola vez cuando el scrollTop de la pagina sea igual a la posicion de un elemento, osea cuando el elemento sea visible. Ya lo logre, el problema esta ahora en que cada vez que el scrollTop es igual a la posicion del elemento, se ejcuta cuantas veces el usuario pasa por alli, no quiero eso, solo quiero que se ejecute una sola vez cuando se cargue la pagina. Aqui el codigo..

$(window).on("scroll", function(){
    if($(window).scrollTop() >= 780){
        let rangos = document.getElementsByClassName('rangos');
        for(let rango of rangos){ 
                let elRango = rango;
                let idRango = rango.getAttribute('id');
                // console.log(idRango);
                conteo(elRango, idRango);
        }
        function conteo(el, num) {
            var cont = 0;
            var id = setInterval(function(){
                el.innerHTML = cont + ' %';
                cont++;
                if(cont > num) {
                    clearInterval(id);
                }
            }, 70);
        }
    }

});

Ejecutar código cuando el ScrollTop sea igual a la posición de un elemento una única vez

Intento hacer que un codigo se ejecute una sola vez cuando el scrollTop de la pagina sea igual a la posicion de un elemento, osea cuando el elemento sea visible. 

Ya lo logre, el problema esta ahora en que cada vez que el scrollTop es igual a la posición del elemento, se ejecuta cuantas veces el usuario pasa por allí, no quiero eso, solo quiero que se ejecute una sola vez cuando se cargue la pagina. 

Aqui el codigo:

$(window).on("scroll", function(){
    if($(window).scrollTop() >= 780){
        let rangos = document.getElementsByClassName('rangos');
        for(let rango of rangos){ 
                let elRango = rango;
                let idRango = rango.getAttribute('id');
                // console.log(idRango);
                conteo(elRango, idRango);
        }
        function conteo(el, num) {
            var cont = 0;
            var id = setInterval(function(){
                el.innerHTML = cont + ' %';
                cont++;
                if(cont > num) {
                    clearInterval(id);
                }
            }, 70);
        }
    }

});
Origen Enlace

Ejecutar codigo cuando el ScrollTop sea igual a la posicion de un elemento

intento hacer que un codigo se ejecute una sola vez cuando el scrollTop de la pagina sea igual a la posicion de un elemento, osea cuando el elemento sea visible. Ya lo logre, el problema esta ahora en que cada vez que el scrollTop es igual a la posicion del elemento, se ejcuta cuantas veces el usuario pasa por alli, no quiero eso, solo quiero que se ejecute una sola vez cuando se cargue la pagina. Aqui el codigo..

$(window).on("scroll", function(){
    if($(window).scrollTop() >= 780){
        let rangos = document.getElementsByClassName('rangos');
        for(let rango of rangos){ 
                let elRango = rango;
                let idRango = rango.getAttribute('id');
                // console.log(idRango);
                conteo(elRango, idRango);
        }
        function conteo(el, num) {
            var cont = 0;
            var id = setInterval(function(){
                el.innerHTML = cont + ' %';
                cont++;
                if(cont > num) {
                    clearInterval(id);
                }
            }, 70);
        }
    }

});