2

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');
      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>

1 respuesta 1

0

Puedes crear una variable lógica y evaluarla en el condicional junto al scrollTop, y una vez lanzada la función la anulas. Algo así:

var trigger = true;

$(window).on("scroll", function() {
  if (($(window).scrollTop() >= 780) && (trigger)){
    trigger = false;
    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>

1
  • Excelente respuesta, funciono, era tan facil? jajaja, Gracias. Commented el 7 oct. 2017 a las 2:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.