JQuery - Stop Fixed Floating Div When It Hits Another Div

Div in question is the gray box on the right sidebar at this link. Scrolling along nicely, but it never stops. It should stop right before it hits the 'announcements' div. I am aw

Solution 1:

Updated Answer

Since we were modifying the offset in the original code, the script lost track of what the orginal offset was so that y would always equal ctop, therefore always fulfilling (y>=ctop) and never triggering the else block). This is solved by defining ctop outside the function as a global variable so that it's original offset value isn't lost when we manipulate #comment's offset while scrolling. I also added an else block to the nested if so that the offset is reset to zero after scrolling to the bottom and then scrolling back up (otherwise the top off #comment sometimes gets cut off). The following code should work. Once again, let me know how it goes and if you have any questions :)

$(document).ready(function() {
    ctop = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
});
$(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();
    var abottom = $('#announcements').offset().top - parseFloat($('#announcements').css('margin-top').replace(/auto/, 0));

    // whether that's below the form
    if (y >= ctop) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
        if (y > abottom-$('#comment').height()){
            $('#comment').offset({'top': abottom-$('#comment').height()-y});
        }
        else
        {
            $('#comment').offset({'top': 0 });
        }
    } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
    }
    var newWidth = $('#comment').parent().width();
    $('#comment').width(newWidth);

    });

---

Original Answer

So I played around with your site for a bit using Chrome's javascript console to change the binding to the $(window).scroll event, and it looks like the following code should work. What it does is that when the window is scrolled enough to fix the comments div, it also checks to see if the y position of the scrolling is at a place where the announcements div should be at the bottom. If it is, then it offsets the position of the comments div vertically by the difference between the announcement div position + screen size and the current scroll position (which will return a negative value, causing the comments div to go upward). Here is the code that I copied an pasted into the Chrome javascript console (ctrl+shift+j) and appears to be working:

$(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();
    var ctop= $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
    var abottom = $('#announcements').offset().top - parseFloat($('#announcements').css('margin-top').replace(/auto/, 0));

    // whether that's below the form
    if (y >= ctop) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
        if (y > abottom-$('#comment').height()){
            $('#comment').offset({'top': abottom-$('#comment').height()-y});
        }
    } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
    }
    var newWidth = $('#comment').parent().width();
    $('#comment').width(newWidth);

    });

A few notes:
The alignment of the comments div is weird (at least for me) because the div is too big to fit on the page without scrolling. This is more a design issue than a coding issue.

I changed top to ctop because top is a property of window, so you try to access top in the console, it returns a part of the window object.

Let me know if this works for you :)