[GELÖST] Ruckel-Problem bei Scrolleffekt

[DarkOverlord]

Hi,
ich hab auf meiner Website eine Titelleiste, welche bei 100px oben hängt. Wenn man mit der Page soweit herunterscrollt, dass sie den oberen Rand erreicht hat, wird sie dort fixiert beim weiterscrollen.
Dies klappt auch soweit. Allerdings, wenn die Browsergröße gerade minimal größer ist als die Anzeigegröße der Website, also dass die Scrollbalken gerade erschienen sind, und wenn man dann nach unten scrollt ruckelt er sofort wieder nach oben. Ich vermute, weil sich durch das ändern auf position:fixed kurzzeitig die Websitehöhe verkürzt und dadurch die Scrollbalken wegfallen und er wieder auf position 0 0 hochspringt. Auf jeden fall kann man in diesem Fall nicht mehr nach unten scrollen, weil er immer wieder nach oben springt. Wenn das Fenster allerdings größer ist, funktioniert es einwandfrei.

Hier mein JS-Code:

$(document).ready( function() 
	{
             		$(window).scroll( function()
		{
			if ( $(window).scrollTop() > 100 )
			{
				$("#AreaTopMenu").css("position","fixed");
				$("#AreaTopMenu").css("top","0px");
			}
			else if ( $(window).scrollTop() <= 100 )
			{
				$("#AreaTopMenu").css("position","relative");
				$("#AreaTopMenu").css("top","0px");
			}
		});

});

Habt ihr Ideen?

Gruß

 

[andreax]

vieleicht kannst du mit

   body{min-height:115%;}

Die Anzeige soweit erhöhen das es gar nicht so knapp werden kann.
ungetestet

 

[kkapsner]

Hast du einen Link, wo wir uns das Problem live ansehen können?

 

[DarkOverlord]

Hey,
danke für die Antwort.

Habs versucht, aber 115% wendet er nicht an (sonst müssten auch bei großer Browsergröße scrollbalken erscheinen). hab es auch versucht anstatt body in ein umgreifendes div zu setzen, geht aber auch nicht.

 

[andreax]

Eins hab ich noch mit body oder html overflow-y:scroll erzwingst du das vorhandensein der scrollbar
das macht man so wenn man verschieden hohe Seiten nachladet damit die dann nicht springen
ob es das Problem mit deiner Seite löst ?

 

[DarkOverlord]

Hi,
ich hab es gerade hinbekommen...
Das Problem war, das durch setzen auf "fixed" die 100px höhe der menüleiste in der gesamthöhe verschwunden sind und dadurch sich die gesamte website um 100px nach oben verschoben hatte und dadurch das browserfenster reskaliert wurde.
habe nun in der obersten if-anweisung die höhe der darüberliegenden leiste um 100px erhöht, in der else-anweisung wieder erniedrigt und so klappt es. warum ich die obere leiste dabei nicht mit display:hidden aus- und wieder einblenden muss (weil sie ja theoretisch die andere unterdecken sollte), weiss ich nicht.. aber da es funktioniert halt ich mich an "never touch a running system"..