애니메이션 부트 스트랩 navbar 너비

Question

나는 부글 랩 네비게이션으로 헤더 메뉴를 만들려고한다. 잠시 동안 나는 내 navbar를 가지고 스크롤에 나는 클래스 navbar-fixed-top을 추가하고, navbar는 페이지의 전체 너비를 덮는다.

지금 나는 네비게이션 바에 고정 탑 클래스 아무것도하지만, 변화에 CSS를 전환 효과를 추가하려고 we can see here

으로 폭 변화에 애니메이션을 추가 할. 내 HTML 구조 :

<div class="row"> 
    <div class="col-md-8 col-md-offset-2"> 
     <nav class="navbar navbar-default"> 
      <div class="container"> 
       .... 
      </div><!-- /.container-fluid --> 
     </nav> 
    </div> 
</div> 

내 CSS 코드 :

.navfixed{ 
    position: fixed; 
    top:0; 
} 

내 JQuery와 : 당신은 아이디어가있는 경우

var offset = $(".navbar").offset().top; 
$(document).scroll(function(){ 
    var scrollTop = $(document).scrollTop(); 
    if(scrollTop > offset){ 
     $(".navbar").addClass("navbar-fixed-top"); 


    } 
    else { 
     $(".navbar").removeClass("navbar-fixed-top"); 
    } 
}); 

.

덕분에 많은

Answer 1

사용

var scrollTop = $(window).scrollTop(); 

대신

var scrollTop = $(document).scrollTop(); 

또는 당신은 또한 여기에 전체 코드를 참조

var scrollTop = $(this).scrollTop(); 

사용할 수 있습니다

를

var offset = $(".navbar").offset().top; 
$(document).scroll(function(){ 
    var scrollTop = $(window).scrollTop(); 
    if(scrollTop > offset){ 
     $(".navbar").addClass("navbar-fixed-top"); 


    } 
    else { 
     $(".navbar").removeClass("navbar-fixed-top"); 
    } 
}); 

이 정보가 도움이 될 수 있습니다.