完整实例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>scrollspy.js使用实例</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body data-spy="scroll" data-target=".scroll-nav" style="position:relative;">

    <div class="scroll-nav" style="max-width:70px;position:fixed;top:20px;right:20px;">
        <ul class="nav nav-pills nav-stacked">
            <li><a href="#f1" class="f1">1</a></li>
            <li><a href="#f2" class="f2">2</a></li>
            <li><a href="#f3" class="f3">3</a></li>
            <li><a href="#f4" class="f4">4</a></li>
            <li><a href="#f5" class="f5">5</a></li>
        </ul>
    </div>

    <div id="f1" style="min-height:500px;border:1px solid #ddd;">1</div>
    <div id="f2" style="min-height:500px;border:1px solid #ddd;">2</div>
    <div id="f3" style="min-height:500px;border:1px solid #ddd;">3</div>
    <div id="f4" style="min-height:500px;border:1px solid #ddd;">4</div>
    <div id="f5" style="min-height:500px;border:1px solid #ddd;">5</div>

    <script src="http://ajax.useso.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>
</html>

注意事项

  • 需要使用bootstrap nav组件(.active样式将会加到.nav的子元素li上)
  • 需要为body设置position: relative;(body或者滚动条所属元素)
  • 需要启动(通过data api或者通过JavaScript)
  • data-target对应的是.nav的容器元素,而不是.nav

在线演示

http://jsbin.com/fozile/1/