Navigationsleiste - Nach Scroll fixieren

[Beta17]

Hallöchen,

ich arbeite gerade an einer kleinen Website die auch etwas JavaScript beinhalten soll.

Und zwar möchte ich eine Navigationsleiste einbauen die sich nach einem bestimmten Scrollabstand zum oberen Rand oben ans Fenster fixiert.

Den Code hätte ich ein Stück fertig. Meines Wissens nach sollte es so eigentlich so klappen aber das tut es natürlich nicht .

Deswegen habe ich mich hier angemeldet. Vielleicht seht ihr ja den Fehler den ich nicht finden kann.

Ich hoffe ihr könnt mir helfen.

JavaScript

$(document).ready(function() {
	 var myPosY;
	 $(window).bind( "scroll", function() {
	 myPosY = $(window).scrollTop();
	 if ( myPosY >= 50 && $("navigation").hasClass("unfix") ) {
	 $("#navigation").removeClass("unfix");
	 $("#navigation").addClass("fixed");
	 $("#navigation").fadeIn();
	            
	 }
	 else if ( myPosY < 50 && $("#navigation").hasClass("fixed") ) {
	 $("#navigation").removeClass("fixed");
	 $("#navigation").addClass("unfix");
	 $("#navigation").fadeOut();
	 }
	 });
});

CSS

.fixed {
	position: fixed;
	top: 0px;
	left: 50%;
	right:50%;
	margin-left: -450px;
}

.unfix {
	position: relative;
}

 

[kkapsner]

Was heißt genau

tut es natürlich nicht

?
Steht etwas in der Fehlerkonsole?
Hast du einen Link, wo wir uns das live ansehen können?

 

[SteelWheel]

Willkommen hier im Forum!!! Schön, dass Du Dich zu einer Anmeldung getraut hast ...

Check bitte ...

- myPosY und was dort für Werte stehen (Bedingungen eingehalten)
- was macht der "fadeOut" noch gleich da? (Navi = weg?)
- vielleicht bin ich old school, aber "bind:scroll" wird von mir lieber mit "on:scroll" benutzt

URL mit so einem Menü: klick (ist genau so wie Du es wohl meinst/brauchst)

Verbesserungen:
- statt mit Klassen könntest Du auch mit einer gesetzten Variablen arbeiten (verzichtest dann auf DOM-Zugriff)
- $("#navigation") muss eigentlich nur 1x angefasst werden und auf einer Variablen hinterlegt werden; dann nur mit dieser Referenz arbeiten
- wenn Deine Seite eh viel "relative" (position) hat, könnte auch "toggleClass" (für fixed) einfach verwendet werden

Ansonsten:
- Fehlerkonsole auf
- wie erwähnt Bedingungen prüfen

Hab Spaß und enjoy!