Scrollspy + Affix

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>affix + scrollspy example - same function like on bootstrap doc page</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
        <style>
            .navex
            {
                background-color: lemonchiffon;
                position: fixed;
                top:20px;
            }
        </style>
    </head>
    <body data-target="#navparent" data-spy="scroll" data-offset="15">    
        <div class="container">
            <div class="row">
                <div class="span2" id="navparent">
                    <ul  class="nav nav-list navex" data-spy="affix" data-offset-bottom="250">
                        <li><a href="#o">overview</a></li>
                        <li><a href="#c1">chap 1</a></li>
                        <li><a href="#c2">chap 2</a></li>
                        <li><a href="#c3">chap 3</a></li>
                        <li><a href="#c4">chap 4</a></li>
                        <li><a href="#c5">chap 5</a></li>
                    </ul>
                </div>
                <div class="span9" >
                    <p>top of the document</p>
                    <p>
                        With bootstrap version 2.2.2, a bug occurs on
                        <ul>
                            <li>Firefox</li>
                            <li>Chrome</li>
                            <li>Opera</li>
                        </ul>
                        but not on IE10.<br/>
                        
                        <ul>
                            <li>Navigate to chap4, so that the url in the browser is /thispage<b>#c4</b></li>
                            <li>Refresh the window</li>
                        </ul>
                        <p>The offsets...