Question

我正在创建一个网页（有点像那些音乐发布页面，here就是一个例子），我希望在用户滚动之前不会显示底部的某些div到页面底部，延迟一两秒，然后弹出。有点像隐藏的功能的东西。你也可以把它想象成一个无限卷轴，就像你在顶部拖动你的Instagram Feed一样刷新它，然后出现新的帖子。这就是我正在寻找的用户体验，只是在我的情况下它是一个＆＃34;有限滚动＆＃34;，只是默认隐藏了一些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直到滚动到页面底部

1 个答案: