使滚动侧边栏停在页脚

Question

我目前正在使用以下内容:

http://jsfiddle.net/0mLzseby/469/

要使我的侧边栏按下页面.虽然我有一个很大的页脚,我希望div在它到达页脚时停止而不是继续滚动.

我目前的代码是:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

Answer 1

您可以检查是否已向下滚动到页脚,然后删除stick该类:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var footer_top = $("#footer").offset().top;
    var div_top = $('#sticky-anchor').offset().top;
    var div_height = $("#sticky").height();

    if (window_top + div_height > footer_top)
        $('#sticky').removeClass('stick');    
    else if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}

(你可以结合if删除重复的.removeClass,这里用于演示)

然而,当你开始滚动时,你的css会出现令人讨厌的"跳跃" - 在你的小提琴中,正确的内容出现在#sticky下面,然后当你坚持#sticky时,正确的内容会跳跃以填补空白.使用上面的代码,你会得到一些竞争条件,因为当它填补/填补缺口时,offset()会移动.

要解决这个问题,只需float:left在你的#sticky css中添加一个.

更新小提琴:http://jsfiddle.net/0mLzseby/472/

我怀疑你想更进一步,当你到达底部时,div然后开始滚动页面.您可以通过调整"position:fixed"顶部来完成此操作.stick.不要忘记在不在页脚下方时重置它:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var footer_top = $("#footer").offset().top;
    var div_top = $('#sticky-anchor').offset().top;
    var div_height = $("#sticky").height();

    var padding = 20;  // tweak here or get from margins etc

    if (window_top + div_height > footer_top - padding)
        $('#sticky').css({top: (window_top + div_height - footer_top + padding) * -1})
    else if (window_top > div_top) {
        $('#sticky').addClass('stick');
        $('#sticky').css({top: 0})
    } else {
        $('#sticky').removeClass('stick');
    }
}

填充只是让它开始在更自然的地方滚动 - 你可以从其他css属性获得这个,例如边距和其他组件的填充.

更新小提琴:http://jsfiddle.net/0mLzseby/473/

Answer 2

现在可以在不使用 javascript 的情况下使用position: sticky.

更新小提琴：http : //jsfiddle.net/p1gku0mx/3/

关键是将粘性元素包装在另一个div. 由于粘性元素不能移动到其包装器 div 之外，因此当页脚进入视图时它会向上滚动。