title: Bootstrap: Fixed Container (with margin-top) When Scrolling
body: <p>I have the following code. When viewing when scrolling isn't needed, it all displays fine. When scrolling is needed, the container does go to the top of the page just fine but the width changes to 50% of the original full width.</p>
  
  <p>Is there a better way to do this? Can anyone see what I'm doing wrong?</p>
  
  <pre><code>&lt;img src="logo.png" style="margin-top:20px; margin-right:20px; float:right; z-index:0;" /&gt;
  
  &lt;div class="container-fluid" id="jjhead"&gt;
      &lt;div class="row" id="index3" style="margin-bottom:10px;"&gt;
          &lt;div class="col-md-2"&gt;&lt;/div&gt;
          &lt;div class="col-md-1 active"&gt;Home&lt;/div&gt;
          &lt;div class="col-md-1"&gt;About&lt;/div&gt;
          &lt;div class="col-md-1"&gt;What's New&lt;/div&gt;
          &lt;div class="col-md-1"&gt;Integrated Provider Performance&lt;/div&gt;
          &lt;div class="col-md-1"&gt;Comissioning Intelligence&lt;/div&gt;
          &lt;div class="col-md-1"&gt;Intelligence By Role&lt;/div&gt;
          &lt;div class="col-md-1"&gt;'How To' Guides&lt;/div&gt;
          &lt;div class="col-md-1"&gt;FAQs&lt;/div&gt;
          &lt;div class="col-md-2"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>AND</p>
  
  <pre><code>&lt;SCRIPT&gt;
  
  $(document).ready(function () {
  
      var div = $('div#jjhead');
      var start = 100;
  
      $.event.add(window, "scroll", function () {
          var p = $(window).scrollTop();
          $(div).css('position', ((p) &gt; start) ? 'fixed' : 'static');
          $(div).css('top', ((p) &gt; start) ? '0px' : '');
      });
  
  });
  </code></pre>
  
  <p></p>
  
  <p>I've even tried the following. The colour changes but it doesn't unwrap</p>
  
  <pre><code>&lt;SCRIPT&gt;
  
      $(document).ready(function () {
  
          var div = $('div#jjhead');
          var start = $(div).offset().top;
  
          $.event.add(window, "scroll", function () {
              var p = $(window).scrollTop();
              //$(div).css('position', ((p) &gt; start) ? 'fixed' : 'static');
              if ((p) &gt; start) {
                  $(div).wrap('&lt;div class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;&lt;/div&gt;');
                  $(div).css('background-color', 'red');
              }
              if ((p) &lt; start) {
                  $(div).unwrap();
                  $(div).css('background-color', 'green');
              }
          });
  
      });
  
  &lt;/SCRIPT&gt;
  </code></pre>
  
  <p>I found if you scroll just so the function kicks in and sets it as as fixed header and then scroll back, it works. However if you scroll to the bottom and back again to the top, it doesn't</p>