2
$(document).ready(function(){
    contador();
});

function contador(){
    setInterval(intervalo,150);
    x = 0;
    let clases = $("*[data-valor]");

    function intervalo(){
        x++;
        for (let i = 0; i < clases.length; i++){
            resultados = $(clases[i]).attr('data-valor');
            if (x > resultados){
                continue;
            }else{
                
            }
            $(clases[i]).text(x); 
        }
    }
}

Este es el código que solo quiero que se ejecute en un punto específico del scroll, ya lo he intentado pero se ejecuta siempre al cargar la página.

2 respuestas 2

4
window.addEventListener("load",() => {
    window.addEventListener("scroll", () => {
      let windowBottom = window.pageYOffset + window.innerHeight;
      document.querySelectorAll(".contenedor").forEach(el => {
        let objectBottom = el.offsetTop + el.offsetHeight;
        if (objectBottom < windowBottom) {
            // Posición en el elemento       
        } else {
            // Posición diferente al elemento
        }
      });
    })
});

Con esto puedes detectar si el usuario está o no en la posición de scroll de un elemento.

Puedes hacerlo con jQuery también de la siguiente manera

$(window).on("load",function() {
  $(window).scroll(function() {
    var windowBottom = $(this).scrollTop() + $(this).innerHeight();
    $(".contenedor").each(function() {
      let objectBottom = $(this).offset().top + $(this).outerHeight();
      if (objectBottom < windowBottom) {
        // Objeto en la vista
      } else {
        // Objeto fuera de la vista
      }
    });
  }).scroll();
});
3

¡Bienvenido a stackoverflow!

Te expongo un ejemplo muy sencillo que puedes probar. Personalmente considero que el código queda más estructurado realizando el control con una función específica a modo de toggle(activado | desactivado).

El ejemplo consiste en un contenido web de 3 cajas con un alto aproximado de 3000px, para que se pueda probar en pantalla completa. El background comienza en rojo y una vez sobrepasas el breakpoint "punto de rotura" o marcado, en este caso en 500px, cambia a verde, y de vuelta al regresar se torna rojo de nuevo. He agregado de forma adicional un console.log para facilitar la comprensión del scroll y el píxel en el que se encuentra.

$(document).ready(() => {
  const breakpoint = 500;
  $(window).scroll(() => toggleActionByBreakpoint(breakpoint));

  function toggleActionByBreakpoint(breakpoint) {
    const currentScrollPos = $(this).scrollTop();
    console.log(currentScrollPos);

    const isScrollOverPos = currentScrollPos > breakpoint;
    const isScrollUnderPos = currentScrollPos < breakpoint;

    if (isScrollOverPos) $("body").css('background-color', 'green');
    if (isScrollUnderPos) $("body").css('background-color', 'red');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Action on scroll position</title>
</head>
<body style="background-color: red;">
  <div style="margin-top: 500px;"></div>
  500px
  <div style="margin-top: 500px;"></div>
  1000px
  <div style="margin-top: 100px;margin-bottom: 50px;"></div>
  1100px
  <div style="margin-top: 50px;margin-bottom: 2000px;"></div> 
  1150px
  </body>
</html>

Como he visto que haces uso de Jquery, aprovechemos esta librería para un código mas sencillo y rápido, en caso que neceistes que sea si o si en Javascript, creo que es facil adaptarlo, si te ves con problemas comenta y enriquecemos la respuesta, al final JQuery es azucar sintáctico.

Espero que te ayude!

Saludos!

0

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.