Scrollable Sidebar

Asif Ahmed

Last time we created a page with a fixed header up top. This can often be used for navigation or a banner. All the hot pages have fixed headers now! If you go to Twitter you can see it has a fixed header. Fixed headers have a lot of functional advantages. Suppose you are at the bottom of a page and you want to use their navigation bar, in a normal site you would have to scroll all the way to the top to use the navigation bar. On a site with a fixed header, you can always easily access the links on the header.

The functionality we will cover in this post is how to create a scrollable sidebar. This can be useful if you have a sidebar that can expand to have a lot of links and you only want to use a fixed amount of space for it. In addition, the rules that you will learn for creating a scrollable sidebar should help you create other scrollable sections on your site. I’m typing this post out in the WordPress WYSIWYG (Definition of WYSIWG), and it is evident that this WYSIWYG is a div with a fixed height, but is still scrollable. Another good easy way to see scrollable divs is on this example of jsfiddle. This particular example is relevant, as we just want to see how scrollable divs exist on the webpage, but JSFiddle is often used by web developers to easily showcase short examples of web functionality by combining HTML, CSS, and/or Javascript.

Here is how you would create a div that has a fixed height and is scrollable. We will be looking at the example from last time where we already have the fixed header in place. If you remember we were looking at this webpage. As with the fixed header, this functionality can be done completely in CSS.

	div.sidebar{
		height:300px;
		position:fixed;
		top:150px;
		float:left;
		width:100px;
		overflow:auto;
	}

Here I have written the CSS for a div with the class “sidebar”. We fix the height of this div to be 300 pixels. We need to have the position be fixed and the top value equal to 150 pixels so that it doesn’t invade the space of our fixed header. To make this div scrollable, however, we have to add the property “overflow:auto”. This means that if there is enough content to fill up this div and then some, it will automatically create a scroll bar on the side and thus we will have a scrollable div. The width and float properties are there to create a sidebar to the left and that is 100 pixels. The most important tip for creating a scrollable div is to have this property in your CSS overflow:auto.

Again to see this scrollable sidebar in practice, please visit here.