Анимация на бутстрапе навигация ширина

Question

Я пытаюсь создать меню заголовка с навигационной панелью boostrap. На данный момент у меня есть свой навигатор, а на прокрутке я добавляю класс navbar-fixed-top, навигатор покрывает всю ширину страницы, все в порядке.

Теперь я хочу, чтобы добавить анимацию на изменение ширины, как we can see here

Я пытался добавить CSS эффект перехода на Navbar фиксированной высшего класса, но ничего не меняется. мой 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"); 
    } 
}); 

Это может быть полезным.