Bootstrap affix not working properly

I've built documentation using Bootstrap doc's CSS and JavaScript. Below is the code of sidebar in my documentation:

<div class="col-md-3 docs">
    <div class="bs-docs-sidebar">
        <ul class="nav docs-sidebar-nav">
            <li class="active">
                <a href="#one">One</a>
            </li>
            <li>
                <a href="#two">Two</a>
            </li>
        </ul>
    </div>
</div>

And below is the jquery code of .affix:

$(document).ready(function () {            
    $('.bs-docs-sidebar').affix({ offset: { top: 290 } })
})

When I open my page it does not display the sidebar with entries One, Two. When I scroll the page, the sidebar shows "Two" as active but never shows entry "One".

I am using Bootstrap v3.2.0. Why is the sidebar not working properly with .affix. I even tried out with data-spy=affix but it didn't work.

How do I make sidebar work properly with affix?

To add affix, you just need to do something like this:

$(".bs-docs-sidebar").affix({ offset: { top: 60 } });

This will dynamically add one of the following classes to your item based on scroll position:

• .affix-top
• .affix
• .affix-bottom

And then set some styling when the .affix class is in place (bootstrap will automatically add position:fixed so we just need to set the height:

.bs-docs-sidebar.affix {
    top: 20px;
}

Here's a working demo in jsFiddle that uses Affix on the BS sidebar

But it sounds like you're actually having issues with scrollspy and the way that bootstrap is styling .active items. Here's a blog post that goes through all the steps of setting up a side nav bar like the one that twitter bootstrap uses. (Disclaimer, I am the author of that post).