如何阻止固定的侧边栏进入页脚？

Question

I'm building a website. http://check.topicwine.com Have a look to see my work.

I want to make a static sidebar. I'm using the code:

$(function() {
        var offset = $("#ad-wrapper").offset();
        var topPadding = 60;
        $(window).scroll(function() {
            if ($(window).scrollTop() > offset.top) {
                $("#ad-wrapper").stop().animate({
                    marginTop: $(window).scrollTop() - offset.top + topPadding
            });
            } else {
                $("#ad-wrapper").stop().animate({
                marginTop: 0
            });
        };
});
});

The sidebar comes along, but it also goes where it shouldn't. I mean, it enters the footer as well. Rather, it overlaps the footer.

I want it to stop next to the grid.

Thanks, in advance. :)

Answer 1

Set a limit for the top margin, since the sidebar can't go past the $('#main') element.

$(function() {
    var offset = $("#ad-wrapper").offset();
    var topPadding = 60;
    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop(); // Store this for convenience
        if (scrollTop > offset.top) {
            var newMarginTop = scrollTop - offset.top + topPadding;
            // The sidebar can only go so far!
            var marginLimit = $('#main').height() + $('#main').offset().top - offset.top - $("#ad-wrapper").height();
            if (newMarginTop > marginLimit) 
                newMarginTop = marginLimit;
            $("#ad-wrapper").stop().animate({
                marginTop: newMarginTop 
            });
        } else {
            $("#ad-wrapper").stop().animate({
                marginTop: 0
            });
        }
    });
});

Answer 2

Add overflow:hidden to div#content. This way we will get the proper height of the content div.
Now $('#content').height() + $('#content').offset().top is the maximum distance the sidebar should move. Which means, the sidebar's offset.top + height should not go more than this. Add this check in your scroll handler