cambia div in base a quanto hai fatto scorrere la pagina

Question

Sto cercando di cambiare il testo all'interno di un div in base a quanto hai fatto scorrere una pagina. Ho armeggiato con scrollTop e l'altezza del documento di jQuery ma finora non sono riuscito a produrre i risultati desiderati.

Come posso ottenere la posizione di un elemento sulla pagina e quindi fare in modo che jQuery faccia qualcosa dopo che si è passati a quella posizione degli elementi?

L'aiuto è molto apprezzato!

Answer 1

C'era una domanda su Stackoverflow che mi chiedeva qualcosa di simile e ho preparato un piccolo esempio per illustrare come ottenere questo risultato. Non riesco a trovare la domanda in questo momento, ma ecco l'esempio . In questo esempio c'è un div che viene mostrato fino a quando non si scorre un determinato elemento nella pagina in corrispondenza del quale il div è nascosto. Puoi cambiarlo per ottenere ciò che desideri, poiché l'idea è la stessa. Ecco il codice modificato per quello che ti serve:

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

Il buon vecchio ppk da quirksmode.org può mostrarti come trovare la posizione di un elemento: " Questo script trova la posizione reale, quindi se ridimensioni la pagina ed esegui nuovamente lo script, punta alla nuova posizione corretta dell'elemento. "