Element einblenden mit JQuery

Geschrieben von: @studipiepst Donnerstag, den 18. November 2010 um 11:28 Uhr

Codeschnipsel

JQuery macht das Programmieren einfacher
Um ein Element ab einer eigens definierten Scrollposition einblenden zu können, braucht es nur wenige Anweisungen. Die Anweisungen für JQuery:

$(document).ready(function(){
    // Einblenden eines Divs, wenn gewisse "Höhe" gescrollt
    $(window).scroll(function(){
    // Schauen wo das gewünschte Div ist
        // Der Referenzwert der minimal Höhe heraus finden
        // In diesem Fall ist es ein Div#contact, welches im oberen
        // Bereich der Homepage ist
        var height = $('#contact').offset();
        // Die aktuelle Fensterposition (nach dem Scrollen)
        var current = $(window).scrollTop();
        // Umgekehrte Logik, da nach slide immer nach "oben"
        if( current < height.top ){
            $("#foot").slideUp();
        } else {
            $('#foot').slideDown();
        }
    });
});

Der Effekt, welcher auf #foot angewendet wird ist egal. Ebenfalls könnte man auch ein anderes Element, anstatt #foot, animieren.