向下滚动时缩小导航栏（bootstrap3）

粘性导航栏：

要制作粘性导航，您需要将 navbar-fixed-top 类添加到导航中

官方文档 ：http :
//getbootstrap.com/components/#navbar-fixed-
top

官方示例 ：http :
//getbootstrap.com/examples/navbar-fixed-
top/

一个简单的示例代码 ：

<nav  role="navigation">  <div >    ...  </div></nav>

调整导航栏的大小：

如果要在滚动页面时调整导航栏的大小，可以查看以下示例
JS

$(window).scroll(function() {  if ($(document).scrollTop() > 50) {    $('nav').addClass('shrink');  } else {    $('nav').removeClass('shrink');  }});

的CSS

nav.navbar.shrink {  min-height: 35px;}

动画：

要在滚动时添加动画，只需在导航上设置过渡

的CSS

nav.navbar{  background-color:#ccc;   // Animation   -webkit-transition: all 0.4s ease;   transition: all 0.4s ease;}