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

Question

我正在制作一个网页（有点像那些音乐发布页面，here 就是一个例子），我希望底部的某些 div 直到用户滚动到页面底部，延迟一两秒，然后弹出。有点像隐藏功能的东西。你也可以把它想象成一个无限滚动，就像当你在顶部向下拖动你的 Instagram feed 时它会刷新它，并且新的帖子会出现。这就是我正在寻找的用户体验，只是在我的情况下它是 "finite scroll"，只是默认隐藏了一些 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);
    }
});

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

Hide a div until scrolled to the bottom of the page

html

javascript

jquery

scroll

hide