Question

这一定是一些愚蠢的错误但是在我的javascript函数中，当我到达屏幕底部时应该执行的if语句，当我到达屏幕顶部时执行... 这是我的代码：

$(window).scroll(function() {       //detect page scroll        
    if($(window).scrollTop() + $(window).height() == $(document).height())  //user scrolled to bottom of the page?
         {
         $('.animation_image').show(); //show loading image
         }
});

.animation_image是一个加载图片，应该在我到达屏幕底部时显示，但在我向下滚动然后返回到屏幕顶部时显示...

如果有人能解释我做错了什么，那就太好了！

Answer 1

它应该正常工作。虽然只是出于好奇，但这段代码永远不会隐藏图像。难道你还有其他地方可以隐藏它吗？你去，小提琴https://jsfiddle.net/3eg18L8u/

$(window).scroll(function() {       //detect page scroll        
if($(window).scrollTop() + $(window).height() == $(document).height())  //user scrolled to bottom of the page?
     {
     $('.animation_image').show(); //show loading image
     }
else {
     $('.animation_image').hide(); //show loading image
}

}）;

Answer 2

你试过＆gt; =而不是==？

if ($(window).scrollTop() + $(window).height() >= $(document).height())     
{
     $('.animation_image').show(); //show loading image
}

怎么样：

$(document).ready(function(){
    $(window).scroll(function(e){
        e.stopPropagation();
        e.preventDefault();
        var scrollBottom = $(document).height() - $(window).scrollTop() - $(window).height();
        if (scrollBottom == 0) {
            $('.animation-image').show();
        }
    });
});

Answer 3

我似乎无法理解为什么即使在你们所有人的帮助下也无法工作，所以我放弃了并决定使用这个代码，这不是解决方案，而是更多的选择：

function yHandler(){
var wrap = document.getElementById('wrap');
var contentHeight = wrap.offsetHeight;
var yOffset = window.pageYOffset; 
var y = yOffset + window.innerHeight;
if(y >= contentHeight){
    $('.animation_image').show();
 }
    var status = document.getElementById('status');
    status.innerHTML = contentHeight+" | "+y;
}window.onscroll = yHandler

使用如下html内容结构：

<body>    
<div id="status">0 | 0</div>
<div id="wrap">
*ALL CONTENT*
</div>
</body>

和CSS：

div#status{position:fixed; font-size:24px;}

滚动到顶部而不是底部时添加元素

3 个答案: