Is there a Jquery plugin to fix content when scrolling?

Question

Hi,

I have a simple 3 column site - left, center and right. The center column is where the main text content goes and is generally much longer than the left or right content.

before I write one, is there a JQuery plugin to keep my left and right column content in view when the user scrolls the window? i.e. they stick to 10px below the top of the screen when scrolling so they're always in view. but when the user scrolls right up to the top, they sit in their proper places.

An example page is here: http://www.flowmtb.com/morzine/

Obviously if the browser window is shorter than the left or right content, they shouldn't move, otherwise the user will never see what's out of sight!

Cheers, Guy

Answer 1

You don't need jQuery for this. Check out position: fixed in CSS. But you can use jQuery to detect the size of the browser window, so you can set position: absolute; if it's too small.

Update: I made an example page. The important code is this:

function colfix(column) {
  if($(window).height() + 20 < $(column).height()) {
    $(column).css("position", "absolute");
  }else{
    $(column).css("position", "fixed");
  }
}

$(document).ready(function() {
  colfix("#two");
})

$(window).resize(function() {
  colfix("#two");
});