使滚动侧边栏停止在页脚处

Question

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

让我的侧边栏跟随页面。 虽然我有一个很大的页脚，但我希望 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() 在填充/取消填充间隙时移动时，您将获得一些竞争条件。

要修复这个差距，只需在 #sticky css 中添加一个float:left即可。

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

我怀疑您想更进一步，当您到达底部时，div 开始随页面滚动。 您可以通过调整.stick的 '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 之外，因此当页脚进入视图时它会向上滚动。

Answer 3

您不需要为此使用 javascript。 您只能使用 CSS 来做到这一点：

position: sticky;

 body{ padding: 0 20px; } #content { height: 1200px; } header { width: 100%; height: 150px; background: #aaa; } main { float: left; width: 65%; height: 100%; background: #444; } aside { float: right; width: 30%; height: 500px; position: sticky; top: 100px; background: #777; } footer { width: 100%; height: 300px; background: #555; }

 <body> <header>Header</header> <div id="content"> <main>Content</main> <aside>Sidebar</aside> </div> <footer>Footer</footer> </body>

Answer 4

您忘记添加类，如果我们在页脚中，并刷新页面，则侧边栏将不会显示：

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').addClass('stick'); //////// here is to get fixed when we refrech page when we are in the footer
        $('#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');
    }
}

Answer 5

您可以检查是否向下滚动添加粘性类，当您滚动页脚和页眉区域时，它将删除粘性类

function Stickyheaderfooterbar() {
        var windowTop = jQuery(window).scrollTop();
        var footerTop = jQuery(".footer").offset().top - 498;
        var stickydivTop = jQuery('#sticky-anchor').offset().top;
        var stickydivHeight = jQuery("#sticky").height();
        console.log('footer' + footerTop);
        console.log('stickydivTop' + stickydivTop);
        console.log('stickydivHeight' + stickydivHeight);
        console.log('windowTop' + windowTop);
        if (windowTop + stickydivHeight > footerTop)
            jQuery('#sticky').removeClass('stick');
        else if (windowTop > stickydivTop) {
            jQuery('#sticky').addClass('stick');
        } else {
            jQuery('#sticky').removeClass('stick');
        }
    }

使滚动侧边栏停止在页脚处

问题描述

5 个解决方案

解决方案1
17 已采纳 2016-02-26 12:53:59

解决方案2
6 2019-03-17 14:21:34

解决方案3
3 2020-03-02 04:41:15

解决方案4
2 2017-11-12 10:48:45

解决方案5
0 2018-12-05 10:10:26

使滚动侧边栏停止在页脚处

问题描述

5 个解决方案

解决方案1 17 已采纳 2016-02-26 12:53:59

解决方案2 6 2019-03-17 14:21:34

解决方案3 3 2020-03-02 04:41:15

解决方案4 2 2017-11-12 10:48:45

解决方案5 0 2018-12-05 10:10:26

解决方案1
17 已采纳 2016-02-26 12:53:59

解决方案2
6 2019-03-17 14:21:34

解决方案3
3 2020-03-02 04:41:15

解决方案4
2 2017-11-12 10:48:45

解决方案5
0 2018-12-05 10:10:26