• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

jquery Anfänger - opacity beim scrollen verändern - Beispiel reagiert nicht

A

americanaccount

New member
Hallo Leute,

vermutlich werde ich gleich ausgelacht, weil der Fehler minimal ist, aber ich weiß iwie nicht weiter. Ein Rechteck (einfach ein div mit Hintergrundfarbe) sollte sich je nach dem wie viel gescrollt wurde in der opacity verändern.

Also gegoogelt und gleich ein Beispiel gefunden, das mir passend erscheint: Edit fiddle - JSFiddle

Jetzt habe ich das Beispiel wie folgt umgesetzt:

Code: 
<html>
<head>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
    <script type="text/javascript">
        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);
        });


    </script>
</head>



<body style="height:9999px;">
<div id="fading" style="margin-top:200px;background:#aaa;">Fading</div>


</body>
</html>


Jquery ist auf jeden Fall erfolgreich eingebunden, da folgender Code ein alert macht.

Code: 
<script type="text/javascript">
$(document).ready(function(){
    alert('Hallo Welt');
});
</script>

Ich raffe es iwie halt voll nicht, weil auf der Beispielseite funktioniert der Code ja tadellos. Verschiedene Browser führen alle zu demselben negativen Ergebnis. Übersehe ich iwas Grundlegendes, ieine Einstellung oder sonst einen Anfängerfehler?
Wie gesagt, bin noch neu, und eigentlich(! -.-) ist das Snippet ja überhaupt nicht schwer zu verstehen... ich meine von der Logik her

Bin für jeden Ratschlag dankbar. :)

Gruß
 
Mich wundert es ebenfalls weil es eigentlich (!) ganz einfach aufgebaut ist.
Fehlereingrenzung:
HTML: 
<script>
$(window).bind('scroll', function(){
            document.body.innerHTML+="scrolled";
        });
</script>
Danach kommt immer 22x scrolled im Fenster. Die bind-Funktion funktioniert also.
$(document).scrollTop() - funtioniert ebenfalls.
Der Fehler:
fading.css('opacity',opacity).html(opacity); - funktioniert nicht!
fading.css('opacity',0).html(0); macht nichts!
$('#fading').css('opacity',0); funktioniert aber.

Endlösung (getestet in FF 38.0.5):
HTML: 
<html>
<head>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
    <script type="text/javascript">
        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);
	    $('#fading').html(opacity);
        });


    </script>
</head>



<body style="height:9999px;">
<div id="fading" style="margin-top:200px;background:#aaa;">Fading</div>


</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Paul, im Beitragseditor untere Zeile rechts das C markiert einzeiligen Inline Code. Ist ganz praktisch für kurze Ausschnitte. Hab das mal benutzt in deinem Beitrag.

Und als einziger Antwortender braucht man nicht zitieren, das hab ich mal entfernt.
 
Der Originalcode funktioniert auch, wenn man die richtige Reihenfolge beachtet:
Code: 
<!DOCTYPE html>
<html>
<head><title>test</title></head>

<body style="height:9999px;">
<div id="fading" style="margin-top:200px;background:#aaa;">Fading</div>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
    <script type="text/javascript">
    (function(){
        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);
        });
    }());


    </script>
</body>
</html>

Das Problem war, dass das DIV #fading zu dem Zeitpunkt, als die JS-Variable fading gesetzt wurde, einfach noch nicht erzeugt wurde, da es im HTML weiter unten ist.

PS: globale Variablen sind hier gar keine gute Idee. Deswegen hab' ich mal einen Scope darum gemacht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben