Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

173
Views
¿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 answers
Answer question

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 Report

0

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

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!