Anpassen, CSS Opacity Mit Element Scrollen mit jQuery

Hallo ich möchte zu binden, die die CSS-opacity zwei divs mit, wie viel das element gescrollt wird.

Zum Beispiel sagen, ich habe zwei divs:

<div class="red" style="background:red"></div>
<div class="blue" style="background:blue"></div>

Als das rote div kommt in den Arbeitsbereich, dessen opacity geht von 0 bis 100 - je nach der Höhe gescrollt werden.

Ebenso wie das Blaue div kommt in viewport seiner Deckkraft geht von 100 auf 0, je nach der Höhe gescrollt werden.

Fand ich diese Jquery/Javascript Opacity-animation mit Blättern -

    var fadeStart=100 //100px scroll or less will equiv to 1 opacity
    ,fadeUntil=200 //200px scroll or more will equiv to 0 opacity
    ,fading = $('#fading')
;

$(window).bind('scroll', function(){
    var offset = $(document).scrollTop()
        ,opacity=0
    ;
    if( offset<=fadeStart ){
        opacity=1;
    }else if( offset<=fadeUntil ){
        opacity=1-offset/fadeUntil;
    }
    fading.css('opacity',opacity).html(opacity);
});

jedoch der scroll-Betrag gebunden ist das Dokument, Höhe, anstatt dem div selbst.

Hier ein jsfiddle arbeiten von http://jsfiddle.net/RPmw9/

Vielen Dank im Voraus.

  • Da offset = $(document).scrollTop() und nicht Ihr element. Ich muss schauen in die scrollTop-Eigenschaft, um zu sehen, ob es verfügbar ist, alle Elemente.
InformationsquelleAutor user3143218 | 2014-02-14
Schreibe einen Kommentar