title: How can I add a scroll bar to a fixed sidebar that only appears on hover
body: <p>I'm working on a site where I made the sidebar to be fixed on the left and extended to the full height of the page using this CSS:</p>
  
  <pre><code>sidebar {
      position: fixed;
      top: 0;
      bottom: 0;
  }
  </code></pre>
  
  <p>And that works fine to keep the sidebar in place, but the problem is when the page is re-sized to a smaller height, you can only see the stuff at the top of the sidebar and there's no way to see the stuff at the bottom of the sidebar.</p>
  
  <p>Now, I know I can add a scroll bar using <code>overflow-y: scroll;</code> but what I'm trying to do is have a scroll bar that only appears when the content on the sidebar exceeds the height of the window and only appears on hover. I also want the scroll bar to have some style to it, similar to the sidebar on <a href="http://thenextweb.com/" rel="nofollow">TheNextWeb</a> or the Facebook chat sidebar.</p>
  
  <p>I know I need some JavaScript to do this, but my skills in JavaScript are very limited so I appreciate any help on this.</p>