twitter bootstrap fix navbar after scrolling

Question

I have a nav-bar that starts off at about 200px from the top of the page on load. As I scroll down, I would like the nav-bar to "affix" itself to the very top of the page and be visible as I scroll through the rest of the content. I am able to get the nav-bar to stay in place though 200px from the top, and it ignores the content i have pulled right and pulls it all to the left. i need to be ensured that the navbar remains visible and that the layout/style is the same the whole way through.

below is my jsfiddle which shows what i am having trouble with

  <!-- Begin Logo / Search -->
  <header class="masthead">
      <div class="row">
        <div class="span6">
          <div class="logo pull-left">
              <h1><a href="/">name</a></h1>
          </div>
        </div>
        <div class="span6">
            <div class="pull-right hidden-phone">
                <form class="search" action="/search" id="site-search">
                    <input type="hidden" name="records" value="6">
                    <div class="input-append">
                        <input type="text" name="q" class="search_box" placeholder="Search" value="" autocomplete="off" />
                        <button class="btn" type="submit"><i class="icon-search"></i></button>
                    </div>
                </form>     
            </div>
        </div>
      </div>
  </header>         


  <!-- Begin Navbar -->
  <div>
    <div class="navbar navbar-static">
      <div class="navbar-inner" id="mastnav">
        <div class="container">
            <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
            <div class="nav-collapse collapse">
                <ul class="nav"><li><a href="#">nav</a> </li></ul>
                <ul class="nav pull-right">
                    <li>
                        <a href="/cart"><i class="icon-shopping-cart"></i> <span id="cart-count">1</span></a>
                    </li>
                </ul>
            </div>      
        </div>
      </div>
    </div><!-- /.navbar -->
  </div>

JSFIDDLE

Answer 1

Once the nav becomes affix it no longer follows the normal navbar CSS styles. You could give an id to the outer DIV container, and then set this as the `affix' element. Use CSS to make sure it stays 100% width.

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}

Working Demo

Related:
Affix Bootstrap flickers after affix-bottom reached and scrolling back top

Answer 2

Here is the modified jsfiddle that accomplishes what you want:

Update: sorry! pasted the wrong jsfiddle! Realised when I sow the negative vote! I'll do it again and update in a moment

Update: here is is:

http://jsfiddle.net/KUPbD/4/

As an extra note, you can declare the affix in the html with data-spy="affix" and data-offset-top="", so no need for an extra inline script