[TYPO3-german] OT jQuery - Konflikt mit zwei Scroll-Events

Johannes C. Laxander jc at laxander.com
Mon Jun 29 11:34:46 CEST 2015


Funktioniert! Super! Vielen Dank Bernd :)

Johannes.

Am 29.06.15 um 08:35 schrieb Johannes C. Laxander:
> Hallo,
>
> ich habe auf einer OnePage-Site einmal ein Scroll-Event um ab einer 
> bestimmten Position eine Nav-Bar einzublenden, und ein Click-Event, um 
> zu einer bestimmten Position in der Seite zu scrollen.
>
> 1) Nav-Bar einblenden:
>
>    var myPosY;
>    jQuery(window).bind( 'scroll', function() {
>      myPosY = jQuery(window).scrollTop();
>      if ( myPosY >= 400) {
>        jQuery('#topbar').fadeIn();
>      } else {
>        jQuery('#topbar').fadeOut();
>      }
>    });
>
> 2) Bei Klick zu bestimmter Position scrollen:
>
> $('#home a').click(function(e) {
>      e.preventDefault();
>      var t = '#' + $(e.currentTarget).attr('href').substring(1);
>      var y = $(t).offset().top - $('#topbar').height();
>      $('html, body').animate({scrollTop: y;}, 'slow'); });
>
> Seit ich das zweite Event hinzugenommen habe funktioniert das erste 
> Event nicht mehr. Und bei 2) wird direkt an das Ziel gesprungen, ein 
> "langsames dorthingleiten" kann ich nicht feststellen.
>
> Was mache ich hier falsch? Wie kann ich den Konflikt umgehen?

es ist nicht unbedingt ein Konflikt. es ist nur so dass kein scroll-event
auftritt wenn du zu einem bestimmten Punkt der Seite springst (auch wenn es
optisch einem Scroll ähnelt).

was du brauchst ist, dass am Ende des Sprungs die Routine aufgerufen wird,
die du auch bei den Scroll-events aufrufst. Um doppelten Code zu vermeiden
solltest du aus der anonymen Funktion eine echte machen, die du von beiden
Stellen aufrufen kannst.

var myMenuFunc = function() {
   var myPosY = jQuery(window).scrollTop();
   :
}

jQuery(window).bind( 'scroll',myMenuFunc);

$('#home a').click(function(e) {
    e.preventDefault();
    var t = '#' + $(e.currentTarget).attr('href').substring(1);
    var y = $(t).offset().top - $('#topbar').height();
    $('html, body').animate({scrollTop: y;}, 'slow');
    myMenuFunc();
});

bernd




More information about the TYPO3-german mailing list