How to create a fixed / sticky sidebar in CSS / JS?

Question

I'm trying to create a website with main content area and a sidebar, something like here on Stack Overflow. The goal is that when you scroll down, the sidebar stays visible.

I have seen two approaches to this:

1. position:fixed;
2. JavaScript manipulation with the DOM

Approach no. 1, as far as I know, will have a problem when the viewport is smaller than the sidebar contents so I guess that can't be used reliably and JavaScript scripts that I have seen are usually animated or generally "slow" (you can see that there is redrawing going on after each scroll).

Can someone point out a JavScript library / CSS approach that would not suffer from the aforementioned issues?

Edit: an example would be this page but with the sidebar sticking to the top without an animation and correctly handling the situation when the sidebar is higher than content / viewport.

Answer 1

I don't like heavy JS solutions, so important thing to ask is - preferred compatibility. In IE8+ it is possible instead of

var $window = $(window),
    $sidebar = $(sidebar);

$window.on('resize', function(){
    $sidebar.height($window.innerHeight());
});

$window.resize();

do something like this (pure CSS solution):

#sidebar {
    position: fixed;
    left: 0; /* or right */
    top: 0;
    bottom: 0;
    overflow: auto;
}

When you have top&bottom / left&right value at the same time, box will be stretched. (JSFiddle demo)