Antworten zum Thema „[JS/JQuery] Scrollposition und animation von Elementen“

[JPS]

Ich habe eine Navigationsleiste mit 100% Breite, die sich beim Start der Seite 100Pixel über unteren Rand befindet. Wenn gescrollt wird, soll sich diese nach oben animieren und stehen bleiben (was sie auch tut).
Scrollt man nun zurück und man kommt oben an, soll sich die Navigationsleiste wird an den Ursprungsort bewegen (was nicht klappt!!!!). Ich habe den Wert für currentPosition ausgeben lassen und dieser erreicht den Nullpunkt, steigt dann aber absurderweise wieder an, so dass die Navigationsleiste nach nem kurzen Flackern wieder oben landet. Was rennt hier falsch?
[code]
$(document).ready(function() {
//Start Config der Navi Leiste
var navAbstandStart = $(window).height() - 100;
$('#navigation').offset({top: navAbstandStart});
//Scroll Funktion
$(window).scroll(function() {
var currentPosition = $(window).scrollTop();
if (currentPosition <=$('#home').offset().top) {
var start = $(window).height() - 100;
$('#navigation').animate({top: start});
$('.logo').fadeIn();
} else {
$('#navigation').animate({top: 0});
$('.logo').fadeOut();
}
});
});
[/code]

 

[JPS]

Ich hab auch mal nen Fiddle gebaut, damit es vielleicht besser zu verstehen ist, wobei dort in der if Abfrage nen fester wert genutzt wird, was aber auch nicht klappt.
http://jsfiddle.net/LLLNF/

 

[JPS]

Hier mal die Wert aus der Console, scheint alles zu stimmen. Seltsam??????

 

[afr0kalypse]

Das Problem ist, dass die Funktion animate() mehrfach aufgerufen wird, wenn du bei ner position < irgendwas bist. Daher kommt das Flackern.
Vielleicht ist das eine mögliche Lösung für dich:

 

[JPS]

$('#navigation').stop().animate({top:start}); hat das Problem weitesgehends gelöst.
Das stop killt den Queue