title: Position Fixed - Set width to be equal to container
body: <p>I have been trying to set a div's position to fixed when a user has scrolled far enough.  I noticed that when the div's position is set to fixed the width is not the same as the parent elemnt.  How can I keep the width of the div with position: fixed the same as the parent element?</p>
  
  <p>In this example I want the bottom div to be the same width as the yellow box once position:fixed is set.</p>
  
  <p><a href="http://jsfiddle.net/BYJPB/" rel="nofollow">http://jsfiddle.net/BYJPB/</a></p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;header&gt;
    &lt;div class="filler-space"&gt;
      Filler Space
    &lt;/div&gt;
    &lt;div class="toolbar"&gt;
      &lt;div class="current-article"&gt;
          &lt;div class="progress-bar"&gt;&lt;/div&gt;
          My article
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>Here's my CSS:</p>
  
  <pre><code>body {
    padding:0 10px;
    height: 1000px;
  }
  
  .filler-space {
    background-color: yellow;
    border:1px solid #000000;
    height: 140px;
  }
  
  .toolbar {
    border: 1px solid black;
  }
  
  .current-article {
    font-weight: 600;
    height: 100%;
    line-height: 40px;
    overflow: hidden;
    width: 100%;
    z-index: -1;
  }
  
  .progress-bar {
    position: absolute;
  }
  
  .prog .progress-bar {
    background: none repeat scroll 0 0 #F2F4F7;
    bottom: 0;
    height: 100%;
    left: 0;
    margin: 0 -10px 0 -10px;
    overflow: hidden;
    right: 0;
    top: 0;
    transition: width 0.1s ease 0s;
    z-index: -1;
    width: 100%;
  }
  </code></pre>
  
  <p>Here is my JavaScript:</p>
  
  <pre><code>var $toolbar = $('.toolbar');
  var $window = $(window);
  var $header = $('header');
  
  $(document).scroll(function() {
    var scrollTop = $window.scrollTop();
    if ( scrollTop &gt; 150) {
      $toolbar.css({
          'position' : 'fixed',
          'top' : 0
      });
      $header.addClass('prog');
    }
    else {
      $toolbar.css({
          'position' : 'static',
          'top' : 0
      });
      $header.removeClass('prog');
    }
  });
  </code></pre>