Feste Navbar mit Animation

Question

Ich versuche eine feste Navbar zu machen, die beim Scrollen ein wenig schrumpft (etwas wie dieses: http://themes.muffingroup.com/be/biker/) und ich habe die Navbar behoben und alles, aber ich kann das nicht bekommen Animation funktioniert einwandfrei

Kann mir jemand anfangen?

Danke!

Answer 1

Sollte super einfach sein @Christian. Arbeiten Sie einfach mit offset() und scrollTop() Funktionen von jQuery lib (wenn Sie können).

In Bezug auf Animation - Übergang sollte die trick tun! Fragen Sie, wenn Sie ein Beispiel benötigen, geben Sie Ihren Code ein.

Answer 2

Wenn Sie zum definierten Punkt scrollen, erhält die Navigationsleiste eine zusätzliche Klasse. EG von der Website erhalten Sie:

Vor

#Top_bar { 
    position: absolute; 
    left: 0; 
    top: 61px; 
    width: 100%; 
    z-index: 30; 
    transition: 

Nach Shrink (bis zu einem gewissen Punkt scrollen):

#Top_bar.is-sticky { 
    position: fixed!important; 
     width: 100%; 
     left: 0; 
     top: -60px; 
     height: 60px; 
     z-index: 701; 
     background: #fff; 
     opacity: .97; 
     filter: alpha(opacity = 97); 
     -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1); 
     -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1); 
     box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1); 

} 

Auch müssen Sie einige jQuery-Code wie folgt aus:

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 

    if (scroll >= 100) { 
     $("#Top_bar").addClass("is-sticky"); 
    } else { 
     $("#Top_bar").removeClass("is-sticky"); 
    } 
});