title: Bootstrap - maintaining column widths using position:fixed?
body: <p>I am trying to create a "sticky" navigation on my page where a div gets <code>position:fixed;</code> once the user has scrolled to the element. The functionality is working as expected, but the widths of the two columns that are supposed to stick to the top change once the sticky class is added. I tried adding <code>width:100%;</code> to the CSS of the sticky element, but then the element expands beyond the container.</p>
  
  <p>How can I make sure the column widths stay where they should be when <code>position:fixed;</code> is added?</p>
  
  <p><strong>HMTL:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="padding"&gt;&lt;/div&gt;
      &lt;div class="anchor"&gt;&lt;/div&gt;
      &lt;div class="row sticky"&gt;
          &lt;div class="col-sm-6"&gt;
              Testing
          &lt;/div&gt;
          &lt;div class="col-sm-6"&gt;
              Testing
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="padding2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.padding {
      height:250px;
  }
  .padding2 {
      height:1000px;
  }
  .sticky {
      background:#000;
      height:50px;
      line-height:50px;
      color:#fff;
      font-weight:bold;
  }
      .sticky.stick {
          position:fixed;
          top:0;
          z-index:10000;
      }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>function stickyDiv() {
      var top = $(window).scrollTop();
      var divTop = $('.anchor').offset().top;
      if (top &gt; divTop) {
          $('.sticky').addClass('stick');
      } else {
          $('.sticky').removeClass('stick');
      }
  }
  
  $(window).scroll(function(){ 
      stickyDiv();
  });
  stickyDiv();
  </code></pre>
  
  <h1><a href="http://jsfiddle.net/r2mtvzao/" rel="noreferrer">JSFiddle</a></h1>
  
  <p>Thanks!</p>