Bootstrap ScrollerSpy Test

HTML

<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
<body data-spy="scroll" data-target="#navbar">
    <div id="posta" class="box"><h1>Post A</h1></div>
    <div id="postb" class="box"><h1>Post B</h1></div>
    <div id="postc" class="box"><h1>Post C</h1></div>
    <div id="postd" class="box"><h1>Post D</h1></div>
    
    <div id="navbar">
        <ul class="nav">
            <li><a href="#posta">Post A</a></li>
            <li><a href="#postb">Post B</a></li>
            <li><a href="#postc">Post C</a></li>
            <li><a href="#postd">Post D</a></li>
        </ul>
    </div>

</body>

CSS

@import url(http://twitter.github.com/bootstrap/assets/css/bootstrap.css);
        .box{
            margin: 0 5px 5px 5px; padding: 15px;
            background: #eee;
            height: 500px;
            width: 200px;
            margin-left: 100px;
        }
        #navbar{
            position: fixed;
            top: 0; left: 0;
            width: 100px;
            background: #fff;
        }
        .nav li a{
            float: left;
            width: 100px;
            padding: 15px 0;
            text-align: center;
        }
        .nav li a:hover{
            color: #f33 !important;
            background: none;
        }
        .nav li.active a{
            background-color: #eee;
            color: #000;
            text-decoration: underline;
        }