CSS 滚动时收缩导航栏（bootstrap3）

在本文中，我们将介绍如何使用CSS在滚动页面时实现导航栏的收缩效果。我们将使用Bootstrap3框架来创建导航栏，并利用CSS来实现滚动时导航栏的缩小和隐藏。

阅读更多：CSS 教程

创建基本导航栏

首先，我们需要通过Bootstrap3框架来创建基本的导航栏。Bootstrap3提供了丰富的CSS类和预定义样式，可以简化我们的开发工作。以下是一个基本的导航栏示例代码：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- 导航栏标题和品牌 -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- 导航链接 -->
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div>
  </div>
</nav>

在上面的代码中，我们创建了一个含有品牌和三个链接的导航栏。导航栏的样式由Bootstrap3的CSS类提供。

滚动时收缩导航栏

要实现滚动时收缩导航栏的效果，我们需要使用一些CSS技巧。我们将使用position: fixed属性使导航栏固定在页面顶部，并添加一个滚动事件来控制导航栏的高度。

首先，我们需要给导航栏添加一个自定义的CSS类，用来控制导航栏的高度和其他样式。在CSS样式表中添加以下代码：

.shrink-navbar {
  position: fixed;
  top: 0;
  width: 100%;
  transition: height 0.3s;
}

以上代码中，我们使用position: fixed将导航栏固定在浏览器的顶部，使用top: 0将导航栏置顶。width: 100%保证导航栏宽度铺满整个页面。

接下来，我们需要使用JavaScript来监听页面滚动事件，并在滚动时动态添加和移除CSS类。添加以下JavaScript代码：

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();

  if (scrollTop > 50) {
    $('.navbar').addClass('shrink-navbar');
  } else {
    $('.navbar').removeClass('shrink-navbar');
  }
});

以上代码使用jQuery来监听$(window).scroll事件，并根据页面滚动的高度来添加或移除.shrink-navbar类。当页面滚动高度超过50像素时，添加.shrink-navbar类，导航栏高度收缩；否则，移除.shrink-navbar类，导航栏恢复原始高度。

现在，我们已经完成了滚动时收缩导航栏的实现。可以尝试在页面中滚动查看效果。