Question

I’ve got a fixed div on the left of a page that can scroll with the whole page if it’s longer than the browser window, and will stop scrolling when it reaches the end.

This works fine if the page content is longer in height than the div, however if the page content is shorter than the div, the div stops where the page stops and the rest of it can’t be seen.

Here is the code I’m using:

This one is when the page content is longer than the div, everything’s fine: http://jsfiddle.net/nickykw/4Kaxd/2/

But with this one, the page content is shorter than the div, and the div stops too soon: http://jsfiddle.net/vxFtV/2/

I’m supposing the content would need to be fixed in a similar way to the div. How would this be done?

If that can’t be done, would it be possible to add something to the bottom of the fixed div, or in the div’s code, to make the browser scroll right to the end of the div even if the main content ended? It doesn’t matter if it leaves lots of white space under the content.

Many thanks

Answer 1

You can check if the body is shorter than the fixed div and if so, set the height of the body to that of the fixed div.

Note, this code must be run onload.

var $body = $("body");
var fixedHeight = $("#theFixed").height();

if($body.height() < fixedHeight){
    $body.height(fixedHeight);
}

http://jsfiddle.net/vxFtV/3/