Menüleiste fixieren bei einer bestimmten Stelle wenn man scrollt

[exUser]

Hallo,

Ich möchte Feld erstellen das ca bei top 500px ist und wenn man dan scrollt, das das feld mit hoch scrollt, aber dann bei 100px top fixiert wird, kann mir da jemand helfen?

 

[threadi]

Dafür brauchst Du JavaScript. Damit kannst Du bei Änderung des Viewports oder alle X Millisekunden prüfen an welcher Stelle sich der Viewport in Bezug auf den oberen Rand der Seite befindet und dann die CSS-Eigenschaften deines Elementes entsprechend anpassen.

 

[AzRaIL]

Nützliche Befehle in jQuery wären dafür:

$(window).height(); //Höhe des Viewports abfragen
$(document).height(); //Höhe deines Dokumentes abfragen
$(window).scrollTop(); //Abfrage wo dein vertikaler Scrollbalken sich befindet.

if ($(window).scrollTop(100px)) {
//Wenn 100px bis nach oben
}

$(window).scroll(function() {
//Immer wenn gescrollt wird soll alles hier drinne ausgeführt werden
});

Deinem Element gibst du position:absolute; und top:500px;
und wenn du bei 100px abstand nach oben angekommen bist gibst du dem Element per jQuery

$("#element").css('position','fixed');

Hoffe das hilft dir weiter.
Korrigiert mich bitte falls was falsch ist :) Bin selber noch am lernen.

 

[Tronjer]

position: absolute is the root of evil. ;)