title: Fixed sidenav bar w/ non-fixed header leaves gap at the top after scrolling
body: <p>The page I'm working on has a header, side nav controls (fixed), and of course content. </p>
  
  <p>The problem I',m running into is that if the content is long enough to make the user scroll, the fixed side nav bar stays fixed but leaves a gap the size of the header above it. </p>
  
  <p>This seems like it should be a simple fix and I might just be over looking something. I'd prefer to do it with pure css if possible or plain js with no jQuery. </p>
  
  <p><a href="https://jsfiddle.net/fiddler67/wp1owdyj/1/" rel="nofollow noreferrer">fiddle example</a>, might have to make the 'result' area wider to see the side nav. </p>
  
  <pre><code>&lt;body&gt;
   &lt;nav&gt; ... &lt;/nav&gt;
   &lt;div class="wrapper"&gt;
    &lt;div class="sidebar-wrapper"&gt;...&lt;/div&gt;
    &lt;div class="page-content-wrapper"&gt;...&lt;/div&gt; 
   &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The css</p>
  
  <pre><code>#sidebar-wrapper {
      z-index: 1000;
      position: fixed;
      left: 250px;
      width: 0;
      height: 100%;
      margin-left: -250px;
      overflow-y: auto;
      background: #f5f5f5;
      border-right: 1px solid #ccc;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  #page-content-wrapper {
      width: 100%;
      position: absolute;
      padding: 15px;
  }
  </code></pre>