使用 Bootstrap 3 向下滚动时缩小导航栏答案

【问题标题】：Shrink navbar while scrolling down using Bootstrap 3使用 Bootstrap 3 向下滚动时缩小导航栏
【发布时间】：2014-02-17 04:59:37
【问题描述】：

我正在使用 Bootstrap 3 开发网站。我需要创建一个导航栏，当用户向下滚动时它会缩小。

类似 - http://osticket.com

我怎样才能创建这个？我使用 Bootstrap 的固定顶部示例作为起点 - http://getbootstrap.com/examples/navbar-fixed-top/

我需要在左侧放置一个徽标而不是文本，并且它应该随着用户向下滚动而减小其大小。

【问题讨论】：

您是否尝试过自己解决这个问题？看起来不像，因此投反对票
"asap" 很便宜

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

此处记录了滚动时缩小的良好示例：http://www.bootply.com/109943

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});

【讨论】：

【解决方案2】：

您可以简单地按照他们的方式进行操作。如果您查看页面源代码，它们只是在页面滚动时向 body 元素添加一个类。该类正在覆盖表头的显示格式。

为了检测页面是否已经向下滚动，他们使用了带有事件监听器的 javascript 函数。函数源码可以看这里：

http://osticket.com/sites/all/themes/Porto/js/sticky.js

【讨论】：

【解决方案3】：

您必须为此功能添加 java 脚本。必须相应地更新 CSS 类以获得缩小滚动效果。此链接上显示了完整的示例。 http://www.bootply.com/109943#

【讨论】：