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

[bernd wilke]

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
-- 
http://www.pi-phi.de/cheatsheet.html