Sticky-Header mit jQuery

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;
}