twitter-bootstrap 使用 Bootstrap 3 向下滚动时缩小导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21821101/
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
Shrink navbar while scrolling down using Bootstrap 3
提问by user3301160
I am using Bootstrap 3 for developing a website. I need to create a navbar which should shrink as the user scrolls down.
我正在使用 Bootstrap 3 开发网站。我需要创建一个导航栏，它应该随着用户向下滚动而缩小。
Something like - http://osticket.com
类似的东西 - http://osticket.com
How can I create this? I am using Bootstrap's fixed-top example as a starting point - http://getbootstrap.com/examples/navbar-fixed-top/
我怎样才能创建这个？我使用 Bootstrap 的固定顶部示例作为起点 - http://getbootstrap.com/examples/navbar-fixed-top/
I need to put a logo onto the left instead of the text and it should reduce its size as the user scrolls down.
我需要在左侧而不是文本上放置一个标志，当用户向下滚动时，它应该减小其大小。
回答by Yabs
Good example of shrinking when scrolling has been documented here: http://www.bootply.com/109943
此处记录了滚动时缩小的好示例：http: //www.bootply.com/109943
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
回答by DjDCH
You can simply do it the same way they did it. If you look at the page source, they are simply adding a class to the body element when the page is scrolled. This class is overwriting the display format of the header.
你可以简单地按照他们的方式来做。如果您查看页面源代码，它们只是在滚动页面时向 body 元素添加一个类。此类正在覆盖标题的显示格式。
To detect if the page has been scrolled down, they are using a javascript function with events listeners. You can look at the function source code here:
为了检测页面是否已向下滚动，他们使用了带有事件侦听器的 javascript 函数。你可以在这里查看函数源代码：
回答by Muhammad Asim
You have to add java-script for this function. CSS classes have to be updated accordingly to get the shrink on scroll affect. Complete example is shown on this link. http://www.bootply.com/109943#
您必须为此功能添加 java 脚本。CSS 类必须相应地更新以获得滚动效果的缩小。完整示例显示在此链接上。http://www.bootply.com/109943#
