javascript - 滚动时固定但停在页脚

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

但是没有什么能消除“跳跃”，有没有人可以帮助我让它工作或有类似的代码片段？提前致谢!

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

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