使滚动侧边栏停在页脚 [英] Make scrolling sidebar stop at footer

问题描述

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

I'm currently using the following:

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

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

To make my sidebar follow down the page. I have quite a large footer though and I'd like the div to stop when it gets to the footer rather than to keep scrolling.

我目前的代码是：

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

推荐答案

您可以查看是否已向下滚动到页脚，然后删除 stick 类：

You can check if you've scrolled down to the footer, then remove the stick class:

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，这里用于演示）

(you could combine the if to remove the duplicate .removeClass, here for demonstration)

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

However, with your css you get a nasty 'jump' around when you start scrolling - in your fiddle, the right content appears below #sticky then when you stick #sticky, the right content jumps to fill the gap. Using the code above, you'll get some race-conditions as the offset() moves when it fills/unfills the gap.

要修复这个差距，只需添加一个 float：left 到你的#sticky css。

To fix this gap, just add a float:left to your #sticky css.

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

我怀疑你想更进一步，当你到达底部时，div然后开始滚动页面。你可以通过调整 .stick 的'position：fixed'顶部来做到这一点。不要忘记在不在页脚下方时重置它：

I suspect you would like to go one step further and, when you get to the bottom, the div then starts to scroll with the page. You can do this by adjusting the 'position:fixed' top of .stick. Don't forget to reset it when not below the footer:

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属性中获取此信息，例如边距和其他组件的填充。

The padding just makes it start scrolling in a more natural place - you can probably get this from other css attributes such as margin and padding of the other components.

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

这篇关于使滚动侧边栏停在页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！