我一直在使用 JQuery,但从来没有做过这样的事情。
我想做的是:
当用户向下滚动到页面的页脚时,我想使用 JQuery 开始显示在页脚正下方加载的 10 段内容。如何使用 JQuery 做到这一点?任何现有的插件或提示?
我查找了无限滚动和类似的东西,但我不确定如何仅在用户超过页脚时触发内容的显示。
我一直在使用 JQuery,但从来没有做过这样的事情。
我想做的是:
当用户向下滚动到页面的页脚时,我想使用 JQuery 开始显示在页脚正下方加载的 10 段内容。如何使用 JQuery 做到这一点?任何现有的插件或提示?
我查找了无限滚动和类似的东西,但我不确定如何仅在用户超过页脚时触发内容的显示。
将监听器绑定到滚动事件并监控滚动位置。一旦它通过了某个值,就显示内容。
您可以使用获取滚动位置.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();
});
实际上正确的代码需要在页脚可见时显示段落,因此您必须添加窗口高度参数:
var target = $("#footer").offset().top-$(window).height();
像这样做:
var target = $("#footer").offset().top-$(window).height();
$(document).scroll(function() {
if ($(window).scrollTop() >= target) {
$(".content").show();
}
});
如果您不设置窗口高度,页脚必须到达窗口顶部,我认为这不是您想要的。
你可以在这里试试:JSFiddle