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 functionupdatePosition();
});

var tester = null;
functionupdatePosition() {

    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");
    }
}

functiontestPosition(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()) returntrue;
    returnfalse;
}

HTML

<divclass="body"><divclass="leftBar">
        La la links
        <divclass="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.