Stick div to bottom of browser window

Question

I have a div that I would like to stick to the bottom of the browser window (the actual browser window not the page). The div needs to stay at the bottom of the browser window while the user scrolls.

Right now, the div will stick to the bottom of the window on the first initial scroll but it will not re-position each time there is a new scroll. Here is what I have for my jQuery:

$(window).scroll(function () { 
    var bHeight = $(window).height();
    $('.test').css({
        top: bHeight - 77 + 'px'
    });
});

Here is a jsfiddle http://jsfiddle.net/3ecx7zp9/1/

Answer 1

This can simply be done in CSS. Remove all your JavaScript, and do the following:

position: fixed;
bottom: 77px;

Fiddle

Answer 2

This is precisely what position: fixed was designed for:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Here's the fiddle: http://jsfiddle.net/uw8f9/