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:

sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
}

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.

Now, I know I can add a scroll bar using overflow-y: scroll; 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 TheNextWeb or the Facebook chat sidebar.

I know I need some JavaScript to do this, but my skills in JavaScript are very limited so I appreciate any help on this.

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:

sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
}

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.

Now, I know I can add a scroll bar using overflow-y: scroll; 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 TheNextWeb or the Facebook chat sidebar.

I know I need some JavaScript to do this, but my skills in JavaScript are very limited so I appreciate any help on this.

• javascript
• jquery
• css

1 Answer 1

overflow-y: auto should work:

For styling you should probably search for a good scrollbar-replacement, as scrollbar-styling only works in webkit (http://css-tricks./custom-scrollbars-in-webkit/). It's not a trivial thing to do, but fortunately there are some plugins:

• http://cubiq/iscroll-4
• http://jscrollpane.kelvinluck./
• http://www.yuiazu/perfect-scrollbar/

Just to mention a few.

EDIT: Thanks to sheba, I made some modfications:

.sidebar:hover{
   overflow-y: scroll;
}

http://codepen.io/johannesjo/pen/GcLFn