CSS 向下滚动时缩小导航栏（bootstrap3）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24765155/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Shrinking navigation bar when scrolling down (bootstrap3)
提问by Ed_
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?
我想在我的页面上构建一个导航栏效果，就像在http://dootrix.com/上一样（向下滚动栏变小并且徽标更改后）。我为我的页面使用了引导程序 3。有没有一种简单的方法可以通过引导程序来实现它？
回答by Filo
Sticky navbar:
粘性导航栏：
To make a sticky nav you need to add the class navbar-fixed-topto your nav
要制作粘性导航，您需要将类navbar-fixed-top 添加到您的导航中
Official documentation:
http://getbootstrap.com/components/#navbar-fixed-top
官方文档：http:
//getbootstrap.com/components/#navbar-fixed-top
Official example:
http://getbootstrap.com/examples/navbar-fixed-top/
官方示例：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/
与相关的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
如果您希望在滚动页面时调整导航栏的大小，您可以查看以下示例：http: //www.bootply.com/109943
JS
JS
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
CSS
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
CSS
nav.navbar{
background-color:#ccc;
// Animation
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
I made a jsfiddlewith the full example code: http://jsfiddle.net/Filo/m7yww8oa/
我用完整的示例代码做了一个jsfiddle：http: //jsfiddle.net/Filo/m7yww8oa/
回答by simbasounds
toggleClass works too:
toggleClass 也有效：
$(window).on("scroll", function() {
$("nav").toggleClass("shrink", $(this).scrollTop() > 50)
});
回答by Stephane Paquet
For those not willing to use jQueryhere is a Vanilla Javascript way of doing the same using classList:
对于那些不愿意使用jQuery 的人来说，这里是一种使用classList做同样事情的 Vanilla Javascript 方式：
function runOnScroll() {
var element = document.getElementsByTagName('nav') ;
if(document.body.scrollTop >= 50) {
element[0].classList.add('shrink')
} else {
element[0].classList.remove('shrink')
}
console.log(topMenu[0].classList)
};
There might be a nicer way of doing it using toggle, but the above works fine in Chrome
使用toggle可能有更好的方法，但以上在 Chrome 中工作正常
回答by Al-Mothafar
If you are using AngularJS, and you are using Angular Bootstrap : https://angular-ui.github.io/bootstrap/
如果您使用的是 AngularJS，并且您使用的是 Angular Bootstrap：https: //angular-ui.github.io/bootstrap/
You can do this so nice like this :
你可以像这样很好地做到这一点：
HTML:
HTML：
<nav id="header-navbar" class="navbar navbar-default" ng-class="{'navbar-fixed-top':scrollDown}" role="navigation" scroll-nav>
<div class="container-fluid top-header">
<!--- Rest of code --->
</div>
</nav>
CSS:(Notehere I use padding as bigger nav to shrink without padding you can modify as you want)
CSS： （注意这里我用填充作为更大的资产净值不填充您可以修改为要收缩）
nav.navbar {
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
background-color: white;
margin-bottom: 0;
padding: 25px;
}
.navbar-fixed-top {
padding: 0;
}
And then add your directive
然后添加您的指令
Directive: (Noteyou may need to change this.pageYOffset >= 50from 50 to more or less to fulfill your needs)
指令：（请注意，您可能需要将this.pageYOffset >= 5050更改为更多或更少以满足您的需求）
angular.module('app')
.directive('scrollNav', function ($window) {
return function(scope, element, attrs) {
angular.element($window).bind("scroll", function() {
if (this.pageYOffset >= 50) {
scope.scrollDown = true;
} else {
scope.scrollDown = false;
}
scope.$apply();
});
};
});
This will do the job nicely, animated and cool way.
这将很好地完成工作，动画和很酷的方式。
回答by johannesMatevosyan
You can combine "scroll" and "scrollstop"events in order to achieve desired result:
你可以结合“scroll”和“scrollstop”事件来达到想要的结果：
$(window).on("scroll",function(){
$('nav').addClass('shrink');
});
$(window).on("scrollstop",function(){
$('nav').removeClass('shrink');
});
回答by Sudeep Bashistha
I am using this code for my project
我在我的项目中使用此代码
$(window).scroll ( function() {
if ($(document).scrollTop() > 50) {
document.getElementById('your-div').style.height = '100px'; //For eg
} else {
document.getElementById('your-div').style.height = '150px';
}
}
);
Probably this will help
可能这会有所帮助
