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
_______________________________________________
TYPO3-german mailing list
TYPO3-german@lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
