Mit dieser kleinen JavaScript/jQuery-Funktion lässt sich der Website-Header in einen Sticky-Header verwandeln. Beim Scrollen über eine bestimmte Position wird dynamisch eine .sticky CSS-Klasse hinzugefügt, der dann per CSS beliebige Eigenschaften zugewiesen werden können. Natürlich funktioniert das auch mit beliebigen anderen HTML-Elementen.
JavaScript/jQuery
jQuery(document).ready(function($) {
function sticky()
{
var window_top=$(window).scrollTop();
var top_position=$('body').offset().top;
var element_to_stick=$('#header');
if (window_top > top_position) {
element_to_stick.addClass('sticky');
} else {
element_to_stick.removeClass('sticky');
}
}
$(window).scroll(sticky);
sticky();
});CSS
#header.sticky
{
position: fixed;
}
Servus,
klappt gut, aber sobald ich los scrolle wird schon die class geschrieben. Ich hätte bräuchte oben Abstand 40px. Wie kann man das noch ändern?
Danke
Daniel
Hallo Daniel,
du kannst das element_to_stick (in meinem Beispiel #header) per CSS eine beliebige Position zuweisen, so dass es 40 Pixel Abstand nach oben hat.
Viel Erfolg
Bogdan
Hallo, ich mag´s eher minimalistisch
$(window).scroll(function() {
if ($(this).scrollTop() > 1){$(‘header’).addClass(“sticky”);}
else{$(‘header’).removeClass(“sticky”);}
});
der effekt ist der gleiche, ich kann hinter scrollTop() noch angeben ab wieviel pixel es umschaltet.
Gruß Stephan
Moin,
auf Deiner website hat die “sticky-navigation” so einen coolen Übergangseffekt. Bekommt man das auch mit dem script im beispiel hin?
Beste Grüße
Hallo Jonas,
das hier gezeigte Beispiel ist nur ein ganz einfaches Gerüst für den Aufbau eines Sticky-Headers ohne besondere Effekte. Übergangseffekte beziehungsweise Animationen lassen sich aber mittlerweile aber relativ leicht mit CSS-Transitions umsetzen:
https://css-tricks.com/almanac/properties/t/transition/