要制作粘性导航,您需要将 类添加到导航中
:http ://getbootstrap.com/components/#navbar-fixed- top
:http ://getbootstrap.com/examples/navbar-fixed- top/
:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
...
</div>
</nav>
如果要在滚动页面时调整导航栏的大小,可以查看以下示例
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
nav.navbar.shrink {
min-height: 35px;
}
要在滚动时添加动画,只需在导航上设置过渡
nav.navbar{
background-color:#ccc;
// Animation
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}