[FRAGE] jQuery - Wenn beim Scrollen div1 erreicht wird -> Aktion soll durchgeführt werden

[LikeStar]

jQuery - User scrollt und erreicht div1 -> Aktion soll durchgeführt werden

Hallo Community,

bin gerade am Abschliessen einer Webseite und wollte noch zusätzlich eine Funktion einbauen.

Wenn ich mit dem Browser Balken richtung Div Ebene 1 scrolle (schiebe), soll eine Aktion durchgeführt werden.

Zum Beispiel .fadeToogle.

Gibt es hier für einen Begriff?
Ich tippe da auf:

scrollTop

oder

.offset().top

Bin mir allerdings nich sicher.


Würde mich sehr über ein paar Beispiele freuen.
Danke

 

[Mephiztopheles]

AW: jQuery - Wenn beim Scrollen div1 erreicht wird -> Aktion soll durchgeführt werden

das wäre dann if ( $( 'body' ).scrollTop() == $( '#div1' ).offset().top ).
Da gibt es allerdings noch unterschiede zwischen Chrome und anderen Browsern, denn beim Chrome muss man if ( $( window ).scrollTop() == $( '#div1' ).offset().top ) nehmen.
Das ganze muss dann in einen scrollListener auf den Body.
Ich empfehle 'DOMMouseScroll mousewheel MozMousePixelScroll' für Mausrad
und 'scroll' für normales scrollen.

 

[LikeStar]

AW: jQuery - Wenn beim Scrollen div1 erreicht wird -> Aktion soll durchgeführt werden

@Mephiztopheles


Hallo und danke,

mein Script schaut so aus:

jQuery(document).ready(function(){
  var elYpos = $('#div1').offset().top; 
  $(window).scroll(function(){
    var scrollYpos = $(document).scrollTop();
    if (scrollYpos > elYpos ) {
    jQuery('#navi').fadeToggle( "slow", "linear");
    }
  });
});

Allerdings wird fadeToggle unendlich mal ausgeführt? Wieso?
Würde mich über eine Rückmeldung freuen.

- - - Aktualisiert - - -

@Sempervivum

hast du vielleicht eine Idee, woran es liegt? Ist mein Code Fehlerfrei?

Danke.
Schöne viele Grüße

 

[Mephiztopheles]

AW: jQuery - Wenn beim Scrollen div1 erreicht wird -> Aktion soll durchgeführt werden

fadeToggle wird jedesmal ausgeführt, wenn du nur einen Pixel scrollst.
Du musst also eine Sperre einbauen, um zu prüfen, ob es passiert wurde und es darauf zu beschränken.
Ich geh davon aus, dass beim herunterscrollen ausgefadet und beim hochscrollen eingefadet werden soll?

var fadeTOp = false,
      fadeBot = false;

//document ready
if(true && !fadeBot) // if anweisung scrollDown
$el.fadeOut();
fadeBot = true;
fadeTop = false;

if(true && !fadeTop) // if anweisung scrollUp
$el.fadeIn();
fadeTop = true;
fadeBot = false;

 

[LikeStar]

AW: jQuery - Wenn beim Scrollen div1 erreicht wird -> Aktion soll durchgeführt werden

Hi.

Meinem Script zu Folge:

var elYpos = $('#div1').offset().top;

müsste doch erst FadeToogle ausgeführt werden, sobald die obere Kante des Browsers
mit dem div1 kollidiert?

Verstehe das Ganze jetzt gar nicht mehr.

Edit: Erledigt. Hab's hinbekommen.