Question

I’ve got a solution for keeping a sidebar in the viewport as you scroll up and down the page. Problem comes in when the sidebar is longer than the content area, and you keep scrolling you get this jittering effect as the sidebar keeps pushing the footer down.

I’ve got an example of this setup in jsFiddle: http://jsfiddle.net/U9F7w/2/ (full screen: http://jsfiddle.net/U9F7w/2/embedded/result/ )

My question is, is there a way to make the sidebar stop once it touches the bottom/footer area?

I’ve read some solutions about setting the sidebar to absolute, unfortunately it’s an existing site and changing the position didn’t work and messed with a lot of the existing page elements.

Here’s the jQuery/js I’m working with:

    // set the offset
    var sidebarOffset = $(".sidebar").offset();
    var sidebarPadding = 15;

    // when the window scrolls, keep sidebar in view
    $(window).scroll(function() {
        if ($(window).scrollTop() > sidebarOffset.top) {
            $(".sidebar").stop().animate({marginTop: $(window).scrollTop() - sidebarOffset.top + sidebarPadding });
        } 
        else {
            $(".sidebar").stop().animate({marginTop: 0});
        };
    });  

edit

One thing I thought about was (not sure if this is possible) to detect if the bottom of one div was lower than the bottom of another, stop the scrolling. Is there a way to detect if the bottom of one div is lower than the other?

Answer 1

Check if the sidebar’s height is greater then that of the content:

var ct = $(".content");
var sb = $(".sidebar");
var sbOffsetTop = sb.offset().top;
var sbPadding = 15;

$(window).scroll(function() {
    if (sb.height() < ct.height()) {
        if ($(window).scrollTop() > sbOffsetTop) {
            sb.stop().animate({top: $(window).scrollTop() - sbOffsetTop + sbPadding });
        } 
        else {
            sb.stop().animate({top: 0});
        };
    };
});

See demo fiddle with large content and demo fiddle with large sidebar.

And I don’t know why exactly, I would use top in conjunction with position: relative, but marginTop works also fine.