jQuery 滚动/跟随侧边栏 (div)

Question

使用 jquery 技术实现滚动/跟随侧边栏 Help with Scroll/Follow Sidebar

$(function() {
    var $sidebar   = $(".sidebar"),
        $window    = $(window),
        $footer    = $(".footer"), // use your footer ID here
        offset     = $sidebar.offset(),
        foffset    = $footer.offset(),
        threshold  = foffset.top - $sidebar.height(), // may need to tweak
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > threshold) {
            $sidebar.stop().animate({
                marginTop: threshold
            });
        } else if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});

唯一的问题是当侧边栏(.sidebar)到达页脚(.footer)时，它会将页脚向下推到接近页脚的高度。
如果页脚的高度为 200 像素，侧边栏会将页脚推至 ~200 像素(Internet Explorer)、~50 像素(Firefox、Chrome、Opera)，然后显示页脚。
内容和页脚之间的 200 像素空白是我真正的问题。< br/> 我希望侧边栏在页脚开始处停止滚动。

Answer 1

也许更简洁的代码:

$(function() {
    var $sidebar   = $("#sidebar"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            }, 400);
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            }, 400);
        }
    });
});

您可以将 400 更改为其他值，以更改动画的持续时间(将其设置为 0，让侧边栏“不”动画)。