tag - parent jquery class

¿Cómo detectar el desplazamiento de la página a un cierto punto en jQuery?

Question

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 a un mensaje cuando el usuario se ha desplazado al párrafo con la clase "myPara" y no antes?

Answer 1

Había estado pensando en el problema de adjuntar un evento de desplazamiento (señalado por @AndrewWhitaker), y mi pensamiento final es que no hay necesidad de agregar un controlador de evento scoll cada x segundos, ya que puede ejecutar un setInterval y registrar la devolución de llamada, ya sea que la alerta se muestre 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 showMessageIfNeeded llamada showMessageIfNeeded verificará el valor de scrollTop y mostrará el mensaje si es necesario. Si se muestra el mensaje, setInterval debe 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);
    }
}

Answer 2

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 recomienda no hacerlo (Desplácese hacia abajo hasta "Mejores prácticas").

Actualización : como @AbdulJabbarWebBestow señala , podría ser una mala idea ejecutar innecesariamente una función 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/

Answer 3

$(window).scroll(function(){
    console.log($(''#myPara'').offset().top < $(this).height() + $(this).scrollTop());
});