隐藏 div 直到滚动到页面底部

Question

我正在制作一个网页（有点像那些音乐发布页面，here 就是一个例子），我希望在用户滚动到页面底部之前不显示底部的某些 div ，延迟一两秒，然后弹出。有点像隐藏功能的东西。 你也可以把它想象成一个无限滚动，就像当你在顶部拖动你的 Instagram 提要时，它会刷新它，并出现新的帖子。这就是我正在寻找的用户体验，只是在我的情况下它是一个“有限滚动”，默认情况下隐藏了一些 div。

我目前有两种实现方式，都没有完全达到预期的体验。两者都使用jQuery Slim。
在这两种实现中，#hidden 是我默认隐藏的 div 的 id，它在 div 标签上有 style="display: none;" 内联。

第一个看起来像这样：

$(window).scroll(function() {
var x = $(document).height() - $(window).height() - 20;
if( $(window).scrollTop() > x ) {
  $("#hidden").delay(1000).show(0);
}
else {
  $("#hidden").hide(0);
}
});

这个问题是当 div 出现时它会改变文档高度，所以当你到达页面底部时它会闪烁（由于重新计算文档高度），有时会回到原来的状态隐。用户体验真的很差。

第二个看起来像这样：

$(window).scroll(function() {
if( $(window).scrollTop() > 75 ) {
  $("#hidden").delay(1000).show(0);
}
else {
  $("#hidden").hide(0);
}
});

这个解决了闪烁问题，完全保持阈值不变，用户体验稍微好一点，但不是很灵活，如果我的页面变长，我必须为 div 设置一个新的阈值才能显示向上。

在上述两种解决方案中，delay(1000) 都不起作用。一旦页面滚动到底部，div 就会出现。

这个设计有可能实现吗？

Answer 1

你可以试试这个代码：

$(window).on("scroll", function() {
    var scrollHeight = $(document).height();
    var scrollPosition = $(window).height() + $(window).scrollTop();
    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
        $("#hidden").delay(1000).show(0);
    }
});