Sticky Header

Zuerst der Header selbst

                    
                    .header{         
                        position: fixed;
                        width: 100%;
                        top: 0;
                        left: 0;  
                        background-color: #000; 
                        transition: all .3s ease; 
                    }
                    
                

Jetzt fügen wir eine neue Klasse in CSS hinzu

                    
                    .header.out
                    
                

und sprechen sie an:

                    
                        .header.out{
                            transform: translateY(-100%);
                        }
                    
                

Und anschließend ein kleines JavaScript (JQuery Bibliotek muss eingebunden werden)

                        
                        var header = $('.header'),
                        scrollPrev = 0;
                        $(window).scroll(function() {
                            var scrolled = $(window).scrollTop();
                        
                            if ( scrolled > 100 && scrolled > scrollPrev ) {
                                header.addClass('out');
                            } else {
                                header.removeClass('out');
                            }
                            scrollPrev = scrolled;
                        });
                        
                    

Wir sind nun fertig. Wenn alles richtig verwendet wurde, muss unser Header beim Runterscrollen versteckt werden und beim Hochscrollen wieder auftauchen.