[JQUERY] Div nach Scrollen nach und nach ausblenden bzw. einblenden

[untouchable]

Hallo,
ich möchte, dass sich mein Div nach Scrollen nach und nach ausblendet.. also wenn man beispielsweise mit dem scrollen stoppt, dann soll das Ausblenden auch aufhören. Wenn ich anschließen wieder nach oben scrolle, soll sich das Div wieder einblenden.

Ich hab bis jetzt folgendes:

<script>
	jQuery(document).ready(function() {
		var myPosY;
		jQuery(window).bind( 'scroll', function() {
			if ( myPosY >= 250) {
				jQuery('.head').fadeOut();
			}
			if ( myPosY <= 250) {
				jQuery('.head').fadeIn();
			}
		});
	});
</script>

Wäre richtig nett, wenn ihr ihr mir hier weiter helfen könntet.
Danke schon einmal im Voraus!

LG.

 

[SteelWheel]

Willkommen hier im Forum und guten Morgen,

fadeOut() bzw. fadeIn() sind vollständig durchgeführte Animationen zwecks Ein- und Ausblenden. Das dürfte nicht das sein, was Du eigentlich suchst (zumindest verstehe ich es jetzt erstmal so).

Du nimmst Dir Dein DIV, vergibst einen Namen (bevorzugt eine eindeutige ID) und hängst einen Event-Handler an das Teil. Das könnte dann bspw. so aussehen:

$(function(){
  $(window).scroll(function(){
     ...
  });
}

Was bei "..." steht ist dann die Abwicklung zwischen Position nach oben ( $(window).scrollTop() ) sowie Deinem gewünschten Effekt, den Du mathematisch auf "opacity" (CSS) regeln wirst. Denn ich habe Dich so verstanden, dass Dein DIV - je weiter Du scrollt - weniger sichtbar wird. Scrollst wieder hoch, kommt es wieder (je nach Position). Sollte Dir das schnöde Ein-/Ausblenden bei Position Y doch reichen, war Dein Ansatz korrekt und Du musst nur definieren (mit "akt. Position >= Auslöserposition" und ob schon ausgeführt (!); also die verwendeten 250).

Und: Ich empfehle Dir nicht mit einer globalen Variablen für myPosY zu arbeiten. Darum würde ich wohl eher sowas machen ...

var meinGeilesProjekt = {
  myPosY: 0,
  animationiert: 0,

  init: function(){
     // Eventhandler für scroll ...
      $(window).scroll(function(){
        this.myPosY = $(windows).scrollTop();
        if(this.myPosY >= 250 && this.animationiert == 0){
           this.animationiert = 1;
           // fadeOut wie gewünscht ...
        } else if(this.myPosY < 250 && this.animationiert == 1){
           this.animationiert = 0;
           // fadeIn wie gewünscht ...
        }
     });
  }
}

$(function(){ meinGeilesProjekt.init(); });

Sämtliche weitere Funktionen bündelst Du unter "meinGeilesProjekt". So räumt man schön auf und müllt den Browser nicht zu.

Das lässt sich auch noch weiter aufbohren! Noch ein kleiner Hinweis, wenn Du mit fadeIn/fadeOut arbeitest: "this" ist dann eine andere Referenz, wenn Du mit einem Callback darin bastelst.

Aber halt irgendwie in die Richtung ... keine Garantie für Funktionsfähigkeit! Das ist hier im Editor entstanden (sorry, dass es keine Tabs gibt).

Du merkst: Eigentlich ganz einfach!

Viel Spaß beim Tüfteln und Probieren. Wenn Du Fragen hast, frag drauf los ... bin aber nicht regelmäßig hier.

 

[mikdoe]

*verschoben aus Ajax*