使用jQuery获取scrollbottom(Getting the scrollbottom using jQuery)

使用jQuery获取scrollbottom(Getting the scrollbottom using jQuery)

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

$(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/

I have the following code which gets the amount the user has scrolled from the top and the bottom and then using these values it should hide or show the shadows.

$(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(); } }); });

The top works fine, but the bottom one should be hiding when you get to the bottom of the page BUT then show again if you are 15 pixels from the bottom.

Example: http://dev.driz.co.uk/shadow/

最满意答案

$（窗口）.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(); } }); });​

$(window).height(); // returns height of browser viewport

$(document).height(); // returns height of HTML document

Change your code to:

$(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(); } }); });​