title: twitter bootstrap fix navbar after scrolling
body: <p>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.</p>
  
  <p>below is my jsfiddle which shows what i am having trouble with</p>
  
  <pre><code>  &lt;!-- Begin Logo / Search --&gt;
    &lt;header class="masthead"&gt;
        &lt;div class="row"&gt;
          &lt;div class="span6"&gt;
            &lt;div class="logo pull-left"&gt;
                &lt;h1&gt;&lt;a href="/"&gt;name&lt;/a&gt;&lt;/h1&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="span6"&gt;
              &lt;div class="pull-right hidden-phone"&gt;
                  &lt;form class="search" action="/search" id="site-search"&gt;
                      &lt;input type="hidden" name="records" value="6"&gt;
                      &lt;div class="input-append"&gt;
                          &lt;input type="text" name="q" class="search_box" placeholder="Search" value="" autocomplete="off" /&gt;
                          &lt;button class="btn" type="submit"&gt;&lt;i class="icon-search"&gt;&lt;/i&gt;&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;     
              &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;         
  
  
    &lt;!-- Begin Navbar --&gt;
    &lt;div&gt;
      &lt;div class="navbar navbar-static"&gt;
        &lt;div class="navbar-inner" id="mastnav"&gt;
          &lt;div class="container"&gt;
              &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
                  &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/a&gt;
              &lt;div class="nav-collapse collapse"&gt;
                  &lt;ul class="nav"&gt;&lt;li&gt;&lt;a href="#"&gt;nav&lt;/a&gt; &lt;/li&gt;&lt;/ul&gt;
                  &lt;ul class="nav pull-right"&gt;
                      &lt;li&gt;
                          &lt;a href="/cart"&gt;&lt;i class="icon-shopping-cart"&gt;&lt;/i&gt; &lt;span id="cart-count"&gt;1&lt;/span&gt;&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;      
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- /.navbar --&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/KUPbD/">JSFIDDLE</a></p>