Question

I have a sidebar that contains content larger than the screen. As the user scrolls down I want that content to come into view until the last bit. Then I want it to be fixed so that as much content stays on screen as possible. I actually want it to work exactly like the “Similar Questions” sidebar when you are posting a question in SO. In each of these example links scroll down. In the broken case notice how everything gets all jumpy.

Should work like this = http://jsfiddle.net/mrtsherman/G4Uqm/2/

But broken in this case = http://jsfiddle.net/mrtsherman/G4Uqm/1/

In the broken case it looks like the scroll event is being retriggered when you reach the end of the page. This then causes subsequent scroll events to trigger which then screw everything up. How can I properly handle this case? I just can’t figure it out.

$(document).ready(function() {

var dynamic = false;
var topOfSidebar = $("#sidebar").offset().top;
var leftOfSidebar = $("#sidebar").offset().left;
var botOfSidebar = topOfSidebar + $("#sidebar").height();
var botOfScreen = $(window).height() + $(window).scrollTop();

//if sidebar fits on screen then use fixed version of it
if (botOfSidebar < $(window).height()) {
    $("#sidebar").addClass("fixed");
    $("#sidebar").css("top", topOfSidebar);
    $("#sidebar").css("left", leftOfSidebar);
}
else {
    dynamic = true;
}
//toggle sidebar class when user scrolls
$(window).scroll(function() {
    console.log($("#sidebar").css("position"));
    botOfScreen = $(window).height() + $(window).scrollTop();
    //return;
    if (botOfSidebar < botOfScreen && dynamic) {
        $("#sidebar").addClass("fixed");
        //$("#sidebar").css("bottom", 0);
        //$("#sidebar").css("left", leftOfSidebar);
    }
    else if (dynamic) {
        $("#sidebar").removeClass("fixed");
    }
});
});

Answer 1

So I figured this one out on my own. The trick is to wrap the content in a div with a min-height attribute. If we switch the sidebar to fixed then the div holds the place of the sidebar. Therefore no more screen resizing.

1. .wrap creates the div
2. .parent gets the sidebar’s parent (the new div)

3. add css properties where min-height is the height of the sidebar. Remove padding and margin

   $(“#sidebar”)
   .wrap(”)
   .parent()
   .css(“min-height”, this.height())
   .css(“padding”, “0px”)
   .css(“margin”, “0px”);