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?
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/
$(window).scroll(function(){ console.log($('#myPara').offset().top < $(this).height() + $(this).scrollTop()); });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); } }