Question

更新我一直在测试粘性位置，但它在Safari版本11.1上不起作用。 Safari是分析中浏览量最高的浏览器。所以我想我还在寻找一个jQuery解决方案。虽然MichałDadowski的答案有助于分配。

我正在尝试在滚动时获取fixed元素，但它需要停止修复并在到达页脚时开始滚动。

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

我的CSS，HTML与现在的this完全相同。

但问题是，我的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的{{1}} 60px次跳跃时所以过渡不是无缝的。当我到达页脚时它会“跳跃”。

我尝试了很多东西。

喜欢将-1.8414添加到60px div。
当它删除课程#sticky后，我跟着stick

但没有什么可以带走“跳跃”是否有人可以帮助我让这个工作或有类似的代码片段？提前谢谢！

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

它应该完全符合你的需要。

在滚动时固定，但在页脚

1 个答案: