Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

183
Vistas
¿Cómo detectar el desplazamiento de la página hasta cierto punto en jQuery?

Imagina que esta es mi página:

 <p>hello</p> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <p class="myPara">My Paragraph</p>

¿Cómo puedo alertar un mensaje cuando el usuario se ha desplazado hacia abajo hasta el párrafo con la clase "myPara" y no antes?

over 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

Qué tal si:

 var target = $(".myPara").offset().top; var interval = setInterval(function() { if ($(window).scrollTop() >= target) { alert("made it!"); clearInterval(interval); } }, 250);

Aquí hay un ejemplo: http://jsfiddle.net/andrewwhitaker/24M3n/1/

Es posible que tenga la tentación de adjuntar un controlador de eventos al evento de desplazamiento de la ventana, pero John Resig desaconseja hacerlo (desplácese hacia abajo hasta "Prácticas recomendadas").

Actualización : como señala @AbdulJabbarWebBestow , podría ser una mala idea ejecutar una función innecesariamente cada 250 ms. Aquí hay un ejemplo actualizado que solo se ejecuta una vez, 250 ms después de la primera vez que un usuario se desplaza:

 var target = $(".mypara").offset().top, timeout = null; $(window).scroll(function () { if (!timeout) { timeout = setTimeout(function () { console.log('scroll'); clearTimeout(timeout); timeout = null; if ($(window).scrollTop() >= target) { alert('made it'); } }, 250); } });

Ejemplo: http://jsfiddle.net/24M3n/858/

over 4 years ago · Santiago Trujillo Denunciar

0

$(window).scroll(function(){ console.log($('#myPara').offset().top < $(this).height() + $(this).scrollTop()); });
over 4 years ago · Santiago Trujillo Denunciar

0

Estuve pensando en el problema de adjuntar un evento de desplazamiento (señalado por @AndrewWhitaker), y mis pensamientos finales son que no es necesario agregar un controlador de eventos scoll cada x segundos, ya que solo puede ejecutar un setInterval y verificar la devolución de llamada si la alerta debe mostrarse o no. p.ej:

 var showMessageInterval = window.setInterval(showMessageIfNeeded, 500); // you could adjust the interval to the animation duration of the // message showing. In this way, the delay will be more "natural"

La devolución de llamada showMessageIfNeeded verificaría el valor scrollTop y mostraría el mensaje si fuera necesario. Si se muestra el mensaje, se debe borrar el setInterval para evitar las siguientes ejecuciones:

 function showMessageIfNeeded() { var scrollTop = $(window).scrollTop(); var targetTop = $(".myPara").offset().top; if (scrollTop > targetTop) { alert('Show message'); window.clearInterval(showMessageInterval); } }
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda