使滚动侧边栏停止在页脚处 [英] 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.

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

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屋！