CSS 在流体Twitter Bootstrap 2.0中创建固定侧边导航

在本文中，我们将介绍如何使用CSS在流体的Twitter Bootstrap 2.0中创建一个固定的侧边导航。固定的侧边导航在网页滚动时始终保持在屏幕的一侧，提供方便的导航方式，使用户可以快速访问网站的各个部分。

阅读更多：CSS 教程

1. HTML 结构

首先，我们需要在HTML中创建一个基本的导航结构。我们可以使用Twitter Bootstrap提供的 HTML 模板来构建导航。

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <nav id="sidebar">
        <ul class="nav">
          <li><a href="#section1">Section 1</a></li>
          <li><a href="#section2">Section 2</a></li>
          <li><a href="#section3">Section 3</a></li>
          <li><a href="#section4">Section 4</a></li>
          <li><a href="#section5">Section 5</a></li>
        </ul>
      </nav>
    </div>
    <div class="col-md-9">
      <div id="section1" class="section">
        <h2>Section 1</h2>
        <p>Content of section 1</p>
      </div>
      <div id="section2" class="section">
        <h2>Section 2</h2>
        <p>Content of section 2</p>
      </div>
      <div id="section3" class="section">
        <h2>Section 3</h2>
        <p>Content of section 3</p>
      </div>
      <div id="section4" class="section">
        <h2>Section 4</h2>
        <p>Content of section 4</p>
      </div>
      <div id="section5" class="section">
        <h2>Section 5</h2>
        <p>Content of section 5</p>
      </div>
    </div>
  </div>
</div>

在这个HTML结构中，我们使用了一个<div>来创建一个带有主内容的容器，同时在左侧使用了<nav>元素来创建导航菜单。导航菜单中的每个链接通过 href 属性指向对应的内容部分。

2. CSS 样式

接下来，我们可以使用CSS样式来固定侧边导航栏。我们需要设置导航栏的位置以及滚动时的固定效果。

#sidebar {
  position: fixed;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.section {
  margin-top: 100px;
}

在这个CSS样式中，我们通过设置position: fixed将侧边导航栏固定在屏幕上。然后，我们使用top和left属性来调整导航栏的位置。transform: translateY(-50%)用于将导航栏在垂直方向上居中对齐。

另外，使用.section类来设置内容部分的margin-top，用于留出足够的空间，以免内容被导航栏遮挡。

3. JavaScript 交互（可选）

如果我们希望导航栏在滚动到不同内容部分时高亮显示当前的部分，我们可以使用一些JavaScript代码实现交互效果。

$(document).ready(function() {
  $(window).scroll(function() {
    $('.section').each(function() {
      if ($(window).scrollTop() >= $(this).offset().top - 100) {
        var id = $(this).attr('id');
        $('#sidebar a').removeClass('active');
        $('[href="#' + id + '"]').addClass('active');
      }
    });
  });
});

这段JavaScript代码会在页面滚动时检测当前所处的内容部分，并根据这个信息添加/移除相应的类来高亮显示导航栏中的链接。