您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

向下滚动时缩小导航栏(bootstrap3)

向下滚动时缩小导航栏(bootstrap3)

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

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;
}
其他 2022/1/1 18:18:33 有553人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶