ändern div basierend auf, wie weit nach unten die Seite, die Sie gescrollt haben

Question

Ich bin versucht zu ändern, der text innerhalb eines div basierend auf, wie weit unten auf einer Seite, die Sie gescrollt haben.Ich habe schon das basteln mit jQuery scrollTop-und Dokument-Höhe, haben aber bisher nicht die gewünschten Ergebnisse liefern.

Wie kann ich die position eines Elements auf der Seite, und dann bekommen Sie jQuery, um etwas zu tun, sobald Sie gescrollt haben, die Elemente position?

Hilfe ist sehr willkommen!

Answer 1

Es war eine Frage auf Stackoverflow gefragt, etwas ähnliches, und ich peitschte ein kleines Beispiel, um zu illustrieren, wie dies zu erreichen.Ich kann nicht finden, die Frage jetzt, aber hier ist das Beispiel.In diesem Beispiel gibt es ein div, das angezeigt wird, bis Sie scrollen, um ein bestimmtes element in der Seite, an welcher Stelle das div ausgeblendet ist.Sie können dies ändern, um zu erreichen, was Sie wollen, wie die Idee ist die gleiche.Hier ist der code geändert für das, was Sie brauchen:

$(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 von quirksmode.org können Sie zeigen, wie die Position finden ein Element: „das Skript findet die reale Position, so dass, wenn Sie die Seite der Größe und das Skript erneut ausführen, verweist ihn auf die richtige neue Position des Elements.“