cambie div en función de la distancia que haya desplazado la página

Question

Estoy tratando de cambiar el texto dentro de un div en función de la distancia que haya recorrido una página. He estado haciendo pequeños retoques con el scrollTop y la altura del documento de jQuery, pero hasta ahora no he logrado los resultados deseados.

¿Cómo puedo obtener la posición de un elemento en la página y luego hacer que jQuery haga algo una vez que se haya desplazado a esa posición de elementos?

¡La ayuda es muy apreciada!

Answer 1

Había una pregunta en Stackoverflow que pedía algo similar y di un pequeño ejemplo para ilustrar cómo lograr esto. No puedo encontrar la pregunta ahora mismo, pero aquí está el ejemplo . En este ejemplo, hay un div que se muestra hasta que se desplaza a un elemento determinado en la página en el que el div está oculto. Puedes cambiar esto para lograr lo que quieres, ya que la idea es la misma. Aquí está el código modificado para lo que necesita:

$(document).ready(function() {
    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
    }

    var myelement = $('#formcontainer'); // the element to act on if viewable
    $(window).scroll(function() {
        if(isScrolledIntoView(myelement)) {
            // do something when element is scrolled to and viewable
        } else {
            // do something when element is not viewable
        }
    });
});

Answer 2

Good old ppk de quirksmode.org puede mostrarle cómo encontrar el puesto de un elemento: " Este script encuentra la posición real, por lo que si cambia el tamaño de la página y ejecuta el script nuevamente, apunta a la nueva posición correcta del elemento. "