Question

I’ve nearly got it all working:
http://firestream.net/2013/index.php?go=stats

Here are the two problems I’m having:

1) as you scroll down I’d like the side nav list to stay at the very top of the screen, not where it stays currently
2) the width of the nav list squishes in as you scroll down

<div class="row">
    <div class="span3">
        <ul class="nav nav-list" id="sidenavbar">
              <li class="active"><a href="#top10pt"><i class="icon-chevron-right"></i> Top 10 Pages Today</a></li>
              <li class=""><a href="#top10pa"><i class="icon-chevron-right"></i> Top 10 Pages Alltime</a></li>
              <li class=""><a href="#daily"><i class="icon-chevron-right"></i> Daily Stats</a></li>
              <li class=""><a href="#top10rt"><i class="icon-chevron-right"></i> Top 10 Referalls Today</a></li>
        </ul>
    </div>

    <div class="span9" id="content">
       <section id="top10pt">
       ...
       </section>
       <section id="top10pa">
       ...
       </section>
       <section id="daily">
       ...
       </section>
       <section id="top10rt">
       ...
       </section>
    </div>
</div>

<script>
$('#sidenavbar').affix();
$('body').scrollspy();
</script>

Any help or advice would be great!

Answer 1

By using the following CSS, the #sidebarnav will be positioned when the affix plugin adds the .affix class to the item. The .affix class will make the positioning fixed and, as mentioned on the docs, you should do the positioning yourself.

#sidebarnav.affix {
  top: 56px;
}

read the docs: You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it’s removing content from the normal flow of the page.