アニメーションのある固定されたnavbar

Question

固定のnavbarを作成しようとしています。これはスクロールするときに少し縮みます（http://themes.muffingroup.com/be/biker/のようなものです）。Navbarが固定されていて、すべてですが、アニメーションが正常に動作するように

誰かが私を始められますか？

ありがとうございます！

Answer 1

超シンプルな@Christianでなければなりません。 jQueryのlibからoffset（）とscrollTop（）関数を使って作業してください。

$(document).ready(function() { 
    var NavTop = $('.nav').offset().top; 
    var Nav = function() { 
    var scrollTop = $(window).scrollTop(); 
    if (scrollTop > NavTop) { 
     $('.nav').addClass('sticky'); 
    } else { 
     $('.nav').removeClass('sticky'); 
    } 
    }; 

Nav(); 

    $(window).scroll(function() { 
    Nav(); 
    }); 
}); 

アニメーションに関しては、trickとしてください！ 例が必要な場合は、コードを記入してください。

Answer 2

定義されたポイントまでスクロールすると、navbarは余分なクラスを取得します。サイトからのEGあなたが得る：

（いくつかのポイントにスクロール）シュリンク後

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

を縮小する前に：

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

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

：

#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); 

} 

また、あなたがこれに似たいくつかのjqueryのコードが必要です