title: How to keep scroller in view inside of Fixed position div with top pixels pushing it down?
body: <p><a href="http://jsfiddle.net/leongaban/6rd2hhpq/8/" rel="nofollow noreferrer">http://jsfiddle.net/leongaban/6rd2hhpq/8/</a></p>
  
  <p>I'm working with a fixed position div and making elements scrollable from inside it. <a href="https://stackoverflow.com/questions/18894400/fixed-position-div-scrollable">Similar to this problem here</a>.</p>
  
  <p>I was able to get the scrollbars to show up, my problem is that I have a fixed header, and my fixed sidebar has to be pushed down in my view.</p>
  
  <p>This allows the user to keep scrolling past the browser window so you lose sight of the scroller.</p>
  
  <p>Is there anyway to keep the scrollbar in view with <a href="http://jsfiddle.net/leongaban/6rd2hhpq/8/" rel="nofollow noreferrer">my example</a>?<br/>
  So that when the scroller hits and stops at the bottom of the view, you also see the last item.</p>
  
  <pre><code>.red-box {
      position: fixed;
      width: 100%;
      height: 40px;
      color: white;
      background: red;
  }
  
  .sidebar {
      position: fixed;
      top: 60px;
      overflow-y: auto;
      margin-left: 20px;
      width: 180px;
      height: 100%;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/Irwur.png" alt="enter image description here"></p>