Konflikt mit zwei Scroll-Events

[jochla]

Hallo,

ich habe auf meine OnePage-Website einmal den Scroll-Event, um ab einer bestimmten Position eine Nav-Bar einzublenden, und einen zweiten Event, bei Klick zu einer bestimmten Position in der Seite zu scrollen.


1) Nav-Bar einblenden:

jQuery(document).ready(function() {

  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');
});

1) funktioniert nicht mehr, seit ich den zweiten Event hinzugenommen habe. Und bei 2) wird direkt an das Ziel gesprungen, ein "langsames dorthingleiten" kann ich nicht feststellen.

Was mache ich falsch? Wie kann ich den Konflikt umgehen?

Gruß, Johannes.

 

[kkapsner]

Du hast einen Syntaxfehler... schau' mal in die Fehlerkonsole.

 

[jochla]

An dem Syntax-Fehler hat es nicht gelegen, ich habe ihn aber behoben: {scrollTop: y} - OHNE Semikolon nach dem 'y' !

Dank Bernd Wilke's Hilfe in der TYPO3 German Mailing Liste konnte ich das Problem lösen.
Wichtig: Es tritt KEIN scroll-event auf, wenn zu einem bestimmten Punkt der Seite gesprungen wird (auch wenn es optisch einem Scroll ähnelt).

Am Ende des "Sprungs" wird die Routine aufgerufen, die auch bei den Scroll-events aufgerufen wird. So habe ich es jetzt gelöst:

var myMenuFunc = function() {
    var myPosY = jQuery(window).scrollTop();
    myPosY = jQuery(window).scrollTop();
    if ( myPosY >= 400) {
      jQuery('#topbar').fadeIn();
    } else {
      jQuery('#topbar').fadeOut();
    }
}

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();
});