如何使用jQuery在滚动到特定位置时显示内容？

Question

我一直在使用JQuery，但从未做过这样的事情。

我想要达到的效果是：

当用户向下滚动到页面的页脚时，我想要使用JQuery来显示10段文本内容，这些内容会加载到页脚下方。如何使用JQuery实现？是否有现成的插件或提示？

我查阅了无限滚动之类的东西，但我不确定如何仅在用户滚过页脚时触发内容的显示。

- starbucks

Answer 1

将监听器绑定到滚动事件并监视滚动位置。一旦它超过某个值，就显示内容。

您可以使用.scrollTop()获取滚动位置，并将其与固定值或页脚位置从.offset()比较。不要忘记添加窗口高度，这样它将在页脚可见时立即触发。

例如:

$(document).scroll(function() {
    var value = $("#footer").offset().top,
        position = $(document).scrollTop() + $(window).height();
    if (position >= value) {
        $(".content").show();
    }
});

为了确保内容在页脚可见但无需滚动的情况下显示，您可以在准备好时触发滚动事件：

$(document).ready(function() {
    $(document).scroll();
});

- nullability

Answer 2

实际上，正确的代码需要在页脚可见时显示段落，因此您需要添加窗口高度参数：

var target = $("#footer").offset().top-$(window).height();

Do it like this:

var target = $("#footer").offset().top-$(window).height();
$(document).scroll(function() {
    if ($(window).scrollTop() >= target) {
        $(".content").show();
    }
});

如果您不设置窗口高度，页脚将到达窗口顶部，我认为这不是您想要的。您可以在此处尝试：JSFiddle。

- Mr.Web

---

你的小提琴也不起作用。底部的文本仍然会显示。 - starbucks

请注意，这不是需要翻译的文本，而是一个视频的链接。 - Mr.Web

好的，让它工作。我该如何使它慢慢显示呢？我决定使用fadeIn("2000")，但还是太快了。谢谢！ - starbucks

将数字按您的意愿增加，这些是毫秒，但请删除引号。如果 $(".content").fadeIn(5000); 是一个数字而不是字符串，那么我的答案正确吗？ - Mr.Web

更改变量目标，删除“$（window）.height（）”，并放入您想要的数字，必须变为：var target = $（“#footer”）.offset（）。top-800; - Mr.Web