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

小编典典

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

css

我想在页面上建立一个导航栏效果，像一样（向下滚动栏变得更小并且徽标更改后）。我在页面上使用bootstrap
3。有没有一种简单的方法可以通过Bootstrap实现它？

阅读 594

2020-05-16

共1个答案

小编典典

粘性导航栏：

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

官方文档 ：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>

调整导航栏的大小：

如果要在滚动页面时调整导航栏的大小，可以查看以下示例
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;
}

2020-05-16