先明确几个页面的高度值:
- window.innerHeight 表示窗口高度
- $(document).height() 返回文档高度(当前显示的高度)
- $(document).scrollTop() 返回滚动条与顶部的距离,在最上部时为0,在最下部时为:$(document).height()-window.innerHeight
例子1:当页面滚动到距离底部400px时,显示footer,否则隐藏footer
$(document).scroll(function()
{
if($(document).height() - $(document).scrollTop() - window.innerHeight <400 )
{
$("footer").show(300);
}
else
{
if(!$("footer").is(":hidden"))
{
$("footer").hide();
}
}
});
例子2:当页面滚动到最底部。来源于:http://www.cnblogs.com/weidiao/p/5514637.html
$(document).scroll(
function() {
if ($(document).scrollTop() + window.innerHeight == $(document)
.height()) {
loadMore()
}
});