Alternative zu Scroll Top - Position anhand von Top-Abstand

[lirum]

Hallo liebes Forum,

ich habe gerade mal angefangen mich ein bisschen mit Javascript auseinanderzusetzen und habe versucht einen Code ein bisschen umzubauen.

Leider bring es nicht das erwünschte Ergebnis und jetzt hoffe ich auf ein bisschen Hilfe.


Ich benötige eine Alternative zu ScrollTop: Ich möchte nicht den bereits gescrollten Bereich abmessen, sondern eine Anweisung ausführen wenn ein div Container einen bestimmten Abstand zum oberen Rand hat.

Im konkreten Beispiel: Hat der div Container #back einen top-Abstand von 0 soll sich die CSS Klasse des Containers #box von .inactive zu .active ändern.


Ich habe es bisher nur so hinbekommen, dass bei einem bestimmten gescrollten Bereich sich die Klasse ändert. Allerdings wird der Text dann ausgeblendet was eigentlich nicht sein soll (es soll sich nur die position von relative zu fixed ändern, wie in den Klassen angegeben)

Ich habe schon versucht scrollTop durch pageY und die $(window) durch $('#back') zu ersetzen, aber das war wohl nicht der richtige Ansatz

Ich denke da sind nur einige Anfängerfehler drin, die wahrscheinlich recht schnell zu lösen sind.
Ich freue mich über Lösungsansätze.

<script>
$(document).ready(function() {

	var myPosY;
	
	$(window).bind( 'scroll', function() {
		myPosY = $(window).scrollTop();
	   
	    if ( myPosY >= 700 && $('#box').hasClass('inactive') ) {
	    	$('#box').removeClass('inactive');
	    	$('#box').addClass('active');
	    	
	    	
	    }
	    else if ( myPosY < 700 && $('#box').hasClass('active') ) {
	    	$('#box').removeClass('active');
	    	$('#box').addClass('inactive');
	    	
	    }
	    
	});
});
</script>

 

[Kasalop]

Ich benötige eine Alternative zu ScrollTop: Ich möchte nicht den bereits gescrollten Bereich abmessen, sondern eine Anweisung ausführen wenn ein div Container einen bestimmten Abstand zum oberen Rand hat.

zu welchem Oberen Rand? Fensterrand oder Websiterand? Und dann isses doch nun nen bissl mathematik. scrollTop() liefert dir den gescrollten bereich und per offsetTop bekommste die position, des divs in der seite. Willst du beispielsweise, dass etwas passiert, wenn das div oben an der seite anschlägt, dann würde das so gehen:

$(document).ready(function() {
  $(window).bind('scroll', function() {
    var sT = $(this).scrollTop();
    var dP = $('#box').offset().top;
    if(sT >= dP) {
      // do something cool.
    }
  });
});

*ungetestet*

Lg Kasalop

 

[lirum]

Vielen Dank schonmal!

Es klappt soweit schon ganz gut, allerdings blendet es mir den Text in #box immernoch aus, obwohl es in der Klasse nicht so angegeben ist.
Liegt das evtl. an "bind" und wenn ja durch was kann ich das ersetzen?

Danke!

<script>
$(document).ready(function() {
  $(window).bind('scroll', function() {
    var sT = $(this).scrollTop();
    var dP = $('#back').offset().top;
    
    if(sT >= dP && $('#box').hasClass('inactive') ) {
	    	$('#box').removeClass('inactive');
	    	$('#box').addClass('active');
	    	
	    	
	    }
	    else if ( sT < dP && $('#box').hasClass('active') ) {
	    	$('#box').removeClass('active');
	    	$('#box').addClass('inactive');
	    	
	    }

  });
});</script>

 

[Kasalop]

er blendet es nicht aus. es wird nur woanders hingesetzt. schau dir nochmal CSS position an. du wechselt hier zwischen den bezugssystemn, indem du position:relative auf position: fixed änderst... also musst du die koordinaten mit umrechnen oder gleich position:absolute anstatt relative nehmen. setzt einfach mal top:0 und left:0 und schau was passiert (also beim klassenchange)

Lg Kasalop

 

[lirum]

Ahh super Danke

 

[scrypter]

wenn man auf Deiner homepage die Bilder anschaut, ist man in der ngg-slideshow gefangen,
da gibts keinen schließen button und es wird auch nicht abgebrochen, wenn man in die abgedunkelte Fläche neben den Bildern klickt, da hilft nur noch F5