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

【问题标题】：Make scrolling sidebar stop at footer使滚动侧边栏停止在页脚处
【发布时间】：2016-06-09 16:01:28
【问题描述】：

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

让我的侧边栏跟随页面。虽然我的页脚很大，但我希望 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();
});

【问题讨论】：

这是可行的，但我们必须为粘性 div 提供固定高度。没有高度就行不通

标签： javascript jquery html css scroll

【解决方案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 然后开始随着页面滚动。您可以通过调整.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');
    }
}

padding 只是让它在一个更自然的地方开始滚动 - 你可能可以从其他 css 属性中获得它，例如其他组件的 margin 和 padding。

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

【讨论】：

非常感谢。将其放入最后一页时必须进行一些调整，但这已经非常出色了。标记为已回答，谢谢！

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

你忘了添加类，如果我们在页脚，然后刷新页面，那么侧边栏不会显示：

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

【讨论】：

【解决方案4】：

您不需要为此使用 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>

【讨论】：

很高兴能帮上忙。如果您需要双向粘性侧边栏，请查看我的 github：github.com/Antosik-dev/Two-direction-Sticky-Sidebar

【解决方案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');
        }
    }

【讨论】：