Breite eines "sticky" Menüs dynamisch ändern

[EduDeLuxe]

Hallo zusammen,

ich habe eine "sticky" Navigation, d.h. wenn ich die Seite nach unten scrolle, bleibt die Navigation an der oberen Seitenkante immer sichtbar.
Soweit funktioniert alles prächtig.
Die Breite der Navigation entspricht der Breite des Headers, allerdings ist es im Moment so, dass die Breite beim Laden der Seite einmal ausgelesen wird und sich dann nicht mehr ändert, wenn die Seite vergrößert/verkleinert wird.
Im "normalem" Zustand (sprich: wenn man die Seite nicht gescrollt hat) verhält sich die Navigation responsive, sobald man aber runter scrollt ist die Breite fix.

hier ist das Ganze zum Testen bereit:
http://jsfiddle.net/m3EXK/3/

Testen:
Seite runter scrollen -> Navigation bleibt oben hängen und die Breite ist korrekt
nun das Fenster in der Breite verkleinern -> Navigation ändert die Breite nicht
oder zurück nach oben scrollen und wieder herunter -> Navigation behält die alte Breite bei (ragt rechts aus der Seite heraus)

Kann mir jemand helfen, dass die Navigation immer die korrekte Breite hat?

Soweit vielen Dank für Eure Hilfe.

 

[jeipack]

Du gibst ihm beim runterscrollen eine fixe Breite:
$('#navigation').addClass('fixedbar').css('top', '0').width(navWidth);
die du nur am Anfang berechnet hast.

Du musst da eine relative Breite angeben (zB 80%).

Oder bei jedem Verändern der Windowgrösse navWidth neu berechnen:
http://jsfiddle.net/m3EXK/5/

 

[EduDeLuxe]

Hi,

danke, ist schon Mal ein Ansatz


Gruß
Edu