mudança div com base em quão baixo a página que você tiver rolado

Question

Eu estou tentando mudar o texto dentro de uma div com base em quão baixo uma página que você tenha rolado. Fui mexer com scrollTop e documento altura do jQuery, mas até agora não conseguiu produzir os resultados desejados.

Como eu poderia obter a posição de um elemento na página e, em seguida, obter jQuery para fazer algo depois de ter rolado para essa posição elementos?

Ajuda é muito apreciada!

Answer 1

Houve uma pergunta sobre StackOverflow que pediu algo semelhante e eu chicoteado até um pequeno exemplo para ilustrar como fazer isso. Não consigo encontrar a questão agora, mas aqui está o exemplo . Neste exemplo, há uma div que é mostrado até que você vá até um certo elemento na página em que ponto o div está escondido. Você pode alterar isso para conseguir o que deseja, como a idéia é a mesma. Aqui está o código modificado para o que você precisa:

$(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

O bom e velho ppk de quirksmode.org pode mostrar-lhe como encontrar a posição de um elemento: "Este script encontra a posição real, então se você redimensionar a página e executar o script novamente, ele aponta para a nova posição correta do elemento."