使用jQuery获取scrollbottom

我有以下代码，它获取用户从顶部和底部滚动的数量，然后使用这些值，它应隐藏或显示阴影。

$(document).ready(function() { if ( $(window).scrollTop() + $(window).height() >= $(window).height() ) { $('div.shadow-bottom').show(); } $(window).scroll(function () { if ( $(window).scrollTop() >= 15 ) { $('div.shadow-top').show(); } else { $('div.shadow-top').hide(); } if ( $(window).scrollTop() + $(window).height() >= $(window).height() - 15 ) { $('div.shadow-bottom').show(); } else { $('div.shadow-bottom').hide(); } }); }); 

顶部工作正常，但当你到达页面底部时底部应该隐藏但是如果你是从底部15像素再次显示。

示例： http ： //dev.driz.co.uk/shadow/

Answer 1

$（窗口）.height（）; //返回浏览器视口的高度

的$（document）.height（）; //返回HTML文档的高度

将您的代码更改为：

 $(document).ready(function() { if ($(window).scrollTop() + $(window).height() >= $(document).height() - 15) { $('div.shadow-bottom').show(); } $(window).scroll(function() { if ($(window).scrollTop() >= 15) { $('div.shadow-top').show(); } else { $('div.shadow-top').hide(); } if ($(window).scrollTop() + $(window).height() >= $(document).height() - 15) { $('div.shadow-bottom').show(); } else { $('div.shadow-bottom').hide(); } }); });​ 

Answer 2

正确的工作示例是：

 $(document).ready(function() { if ($(window).height() < $(document).height()) { $('div.shadow-bottom').show(); } $(window).scroll(function() { if ($(window).scrollTop() >= 15) { $('div.shadow-top').show(); } else { $('div.shadow-top').hide(); } if ($(window).scrollTop() + $(window).height() >= $(document).height() - 15) { $('div.shadow-bottom').hide(); } else { $('div.shadow-bottom').show(); } }); }); 

这是基于bhb的上述答案。