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.

#webentwicklung

#ux design

28.04.2021