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/
In deinem Script. Kannst du mir sagen, das die Navi z.B. erst nach 100px sticky wird. So wird die ja direkt beim Scrollen Sticky.
Hallo Michael! Ja, das geht in dem du die top_position anpasst, das wäre diese Zeile:
var top_position=$('body').offset().top+50;Viel Erfolg
Bogdan
Danke für die Anleitung. Funktioniert soweit.
Ich möchte, dass in diesem script sowohl #header als auch #content ein “sticky” zugewiesen wird.
Was muss ich tun?
Danke schon mal
Sabine
Hallo Sabine, das freut mich zu hören. Um das zu erreichen ist es am einfachsten die
sticky()Funktion um einen Parameter zu erweitern, so dass daselement_to_sticknicht mehr statisch gesetzt sondern dynamisch: sticky(‘#header’) und sticky(‘#content’). Ähnlich müsste man mit der Variabletop_positionverfahren. Viel Spaß und Erfolg!