html - Bootstrap 2.3.2 で Affix を使用する

Question

このようなサイドバーを作成しようとしています。サイド バーがフッターに重なっています。スクロールが最後に達したときにサイドバーを上に移動する必要があります(リンクとまったく同じです)ここに私のコードがあります:Css:

 .bs-docs-sidenav {
        background-color: #FFFFFF;
        border-radius: 6px 6px 6px 6px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
        margin: 60px 0 0;
        padding: 0;
        width: 228px;
    }

    .bs-docs-sidenav > li:first-child > a {
        border-radius: 6px 6px 0 0;
    }

    .bs-docs-sidenav > li:last-child > a {
        border-radius: 0 0 6px 6px;
    }

    .bs-docs-sidenav > li > a {
        border: 1px solid #E5E5E5;
        display: block;
        margin: 0 0 -1px;
        padding: 8px 14px;
    }

    .footer {
        background-color: #F5F5F5;
        border-top: 1px solid #E5E5E5;
        margin-top: 70px;
        padding: 30px 0;
        text-align: center;
    }

    .affix-top {
        position: absolute;
        top: 0px;
        bottom: auto;
    }

    .affix-bottom {
        position: absolute;
        top:auto;
        bottom: 200px;
    }

    .affix {
        top: 0;
    }

html:

  <ul data-spy="affix" data-offset-top="0" data-offset-bottom="0" class="nav nav-list 
   bs-docs-sidenav affix">
    <li class="active">
        <a href="#m1">
            menu1
            <i class="icon-chevron-left"></i>
        </a>
    </li>
    <li>
        <a href="#m2">
            menu 2
            <i class="icon-chevron-left"></i>
        </a>
    </li>
   </ul>

私のコードの何が問題なのですか?