Member Avatar for T4gal

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:
http://www.circusrc.com/

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.

  • 1 Contributor
  • 2 Replies
  • 131 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by T4gal
Member Avatar for T4gal

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
});
Member Avatar for T4gal

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.