I found a script online to have a div stick to the top of the window once you scroll to it, and I got it working fine in Firefox and Opera but in Chrome and Safari the sticky div stops before it gets to the bottom of the page. It's supposed to continue sticking all the way the the footer but in Chrome and Safari it stops about half way.

I'm not very experienced in Javascript so I have no idea what could be causing this or how to fix it. I did some searching on google but unfortunately have had no luck. Any help is greatly appreciated.

It's a wordpress website and can be viewed here:

You'll notice that the two light blue blocks along the sides are the ones that are supposed to stick to the top of the window when you scroll down.

Thanks in advance, and I apologize if I am not giving enough information, I'm not even sure what information is needed to solve this problem.

Sorry, I forgot to include the script I am using.

jQuery(document).ready(function() {
    var s = jQuery("#sticker-left");
    var pos = s.position(); 
    var stickermax = jQuery(document).outerHeight() - jQuery("#colophon").outerHeight() - s.outerHeight(true);
    jQuery(window).scroll(function() {
        var windowpos = jQuery(window).scrollTop();
        if (windowpos >= pos.top && windowpos < stickermax) {
            s.attr("style", ""); //kill absolute positioning
            s.addClass("stick"); //stick it
        } else if (windowpos >= stickermax) {
            s.removeClass(); //un-stick
            s.css({position: "absolute", top: stickermax + "px"}); //set sticker right above the footer

        } else {
            s.removeClass(); //top of page
    //(stickermax); //uncomment to show max sticker postition value on doc.ready

I also had to change the sticky divs to something less conspicuous until the problem is fixed, so now instead of large blue blocks there is just a very small black bar on each side of the content area. If you look right beside the content area on either side while you scroll you can see them.