애니메이션이있는 고정 된 navbar

Question

고정 된 navbar를 만들려고합니다. 스크롤 할 때 조금 줄어 듭니다 (http://themes.muffingroup.com/be/biker/). navbar가 고정되어 있지만 모든 것을 얻을 수는 없습니다. 애니메이션이 제대로 작동합니다.

나를 시작할 수있는 사람이 있습니까?

감사합니다.

Answer 1

슈퍼 간단한 @ 크리스티안이어야합니다. 가능한 경우 jQuery 라이브러리에서 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 코드가 필요합니다