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

• Z时代
• 2024-01-10
• 分类：问答

我想在页面上建立一个导航栏效果，像一样（向下滚动栏变得更小并且徽标更改后）。我在页面上使用bootstrap

3。有没有一种简单的方法可以通过Bootstrap实现它？

回答：

回答：

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

：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;
}

以上是 向下滚动时缩小导航栏（bootstrap3） 的全部内容， 来源链接： utcz.com/qa/419397.html