How Could I Add A Class Of "bottom" To "#sidebar" Once It Reaches The Bottom Of Its Parent Container?

I'm using the code below which adds a class of fixed to #sidebar once it reaches a certain height from the top of the site depending on what page it's on (i.e. home, single, page).

Solution 1:

I believe this is what you are trying to do?

http://jsfiddle.net/M5sMx/33/

$(window).on("scroll", function() { // When you scroll the window, do this function
 updatePosition();
});

var tester = null;
function updatePosition() {

    var sidebar = $("#sidebar"); // Set #sidebar to a variable called "sidebar"
    if (tester == undefined) {
        // Create a tester div to track where the actual div would be. 
        // Then we test against the tester div instead of the actual div.
        tester = sidebar.clone(true).removeAttr("id").css({"opacity" : "0" }).insertAfter(sidebar);
    }

    // If the tester is below the div, make sure the class "bottom" is set.
    if (testPosition(tester)) {
        sidebar.addClass("bottom");
        console.log("Add class");
    }
    else {
        sidebar.removeClass("bottom");
        console.log("remove class");
    }
}

function testPosition(sidebar) {
    console.log(sidebar.offset().top + " + " + sidebar.outerHeight() +" >= " + sidebar.parent().offset().top + " + " + sidebar.parent().outerHeight());
    if (sidebar.offset().top + sidebar.outerHeight() >= sidebar.parent().offset().top + sidebar.parent().outerHeight()) return true;
    return false;
}

HTML

<div class="body">
    <div class="leftBar">
        La la links
        <div class="floater" id="floater">
            Pooper scooper!
        </div>
    </div>
De body
</div>

For a visual explanation of what is going on, see http://jsfiddle.net/M5sMx/38/ as you scroll down, you will see what the "tester" object is doing.