滚动时修复但在页脚处停止

Question

更新 我一直在对粘性位置进行一些测试，但它在 Safari 11.1 版上不起作用。 Safari 是分析领域最高的浏览器。所以我想我仍在寻找 jQuery 解决方案。虽然 Michał Sadowski 的回答有助于分配。

---

我试图在滚动时获取fixed 元素，但它需要停止固定并在到达页脚时开始滚动。

我正在使用此代码：Make scrolling sidebar stop at footer

我的 CSS、HTML 和 this fiddle 现在完全一样。

但问题是，我的fixed 元素需要有一个offset of +60，因为我的标题（菜单）的高度是55px。我已经得到了工作排序的偏移量。 现在，我使用以下代码。

function sticky_relocate() {
    var window_top = $(window).scrollTop()+60;
    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: 60})
    } else {
        $('#sticky').removeClass('stick');
    }
}

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

这种作品。但是当我到达#footer 时，top 从60px 跳转到-1.8414。所以过渡不是无缝的。当我到达页脚时它会“跳跃”。

我已经尝试了很多东西。

• 例如将60px 添加到#sticky div。
• 当它删除 stick 类时，我接着使用 $('#sticky').css({top: 60})

但是没有什么能带走“跳跃”有没有人可以帮助我让它工作或有类似的代码 sn-p？提前致谢！

Answer 1

好的，这在很大程度上取决于您的 html 结构。但是假设你有这样的：

<div class="container">
  <div class="content">
    <div class="sticky">
    </div>
  </div>
  <div class="footer">
  </div>
</div>

现在，在 css 中：

.content{
  position: relative
}
.sticky{
  position: sticky;
  top: 60px;
}

它应该完全满足您的需求。