向下滚动时缩小导航栏(bootstrap3) [英] Shrinking navigation bar when scrolling down (bootstrap3)
问题描述
我想在 http://dootrix.com/ 上建立一个导航栏效果我的页面(向下滚动栏变小并且徽标更改后).我为我的页面使用了引导程序 3.有没有一种简单的方法可以用 bootstrap 来实现它?
粘性导航栏:
要制作粘性导航,您需要将 navbar-fixed-top 类添加到您的导航
官方文档:
https://getbootstrap.com/docs/5.0/components/navbar/#placement
官方示例:
http://getbootstrap.com/examples/navbar-fixed-top/
一个简单的示例代码:
</nav>
与相关的jsfiddle:http://jsfiddle.net/ur7t8/
调整导航栏的大小:
如果您希望在滚动页面时调整导航栏的大小,您可以查看以下示例:http://www.bootply.com/109943
JS
$(window).scroll(function() {如果 ($(document).scrollTop() > 50) {$('nav').addClass('shrink');} 别的 {$('nav').removeClass('shrink');}});
CSS
nav.navbar.shrink {最小高度:35px;}
动画:
要在滚动时添加动画,您只需在导航上设置过渡
CSS
nav.navbar{背景颜色:#ccc;//动画片-webkit-transition:所有 0.4 秒轻松;过渡:全0.4s缓动;}
我用完整的示例代码制作了一个 jsfiddle:http://jsfiddle.net/Filo/m7yww8oa/
I would like to build a navigation-bar effect like it is on http://dootrix.com/ on my page (after scrolling down the bar getting smaller and the logo changes). Im using bootstrap 3 for my page. Is there an easy way to realize it with bootstrap?
Sticky navbar:
To make a sticky nav you need to add the class navbar-fixed-top to your nav
Official documentation:
https://getbootstrap.com/docs/5.0/components/navbar/#placement
Official example:
http://getbootstrap.com/examples/navbar-fixed-top/
A simple example code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
...
</div>
</nav>
with related jsfiddle: http://jsfiddle.net/ur7t8/
Resize the navbar:
If you want the nav bar to resize while you scroll the page you can give a look to this example: http://www.bootply.com/109943
JS
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
CSS
nav.navbar.shrink {
min-height: 35px;
}
Animation:
To add an animation while you scroll, all you need to do is set a transition on the nav
CSS
nav.navbar{
background-color:#ccc;
// Animation
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
I made a jsfiddle with the full example code: http://jsfiddle.net/Filo/m7yww8oa/
这篇关于向下滚动时缩小导航栏(bootstrap3)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!