當滾動到頂部而不是底部時添加元素

這一定是一些愚蠢的錯誤，但在我的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是，當我到達屏幕的底部，當我回來到屏幕頂部向下滾動，然後應該出現，但出現一個加載圖片...

如果有人能解釋我做錯了什麼，那會很棒！

來源

2015-11-08 Jackymamouth

似乎是工作的罰款。 http://codepen.io/anon/pen/wKYqzz – Shikkediel

它似乎也適用於我。 $（document）.height的價值是多少？ – Bigalow

$（document）.height value is 800 – Jackymamouth

它應該正常工作。儘管出於好奇，但這些代碼從未隱藏圖像。難道它不應該讓你把它藏起來嗎？你去那裏，一個小提琴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 
}

}）;

來源

2015-11-08 00:35:23 Shiroo

我在HTML中有這個元素： '

' 圖像默認爲隱藏 – Jackymamouth

我幾乎可以肯定，它應該正常工作。你沒有任何奇怪的消息在控制檯或任何東西？導致你做這件事的方式（檢查底部）現在是相當知名和廣泛使用的，它應該簡單地工作。也是什麼瀏覽器？我想說這可能是原因。 Miles O'Keefe對於「適用於所有瀏覽器」的解決方案也提供了很好的迴應，可能適合您（如果真的是瀏覽器）。 http://stackoverflow.com/a/10795797/5538090 – Shiroo

嘗試不幸沒有工作：/去替代方式，只是發佈它 – Jackymamouth

你試過> =而不是==嗎？

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

來源

2015-11-08 00:36:04 Nitin

不解決問題：/只是讓圖像顯示，而不必向下滾動然後備份 – Jackymamouth

只是試過，仍然會有相同的錯誤：/ – Jackymamouth

嘗試添加另一部分到向下滾動時觸發的if函數。例如。如果（currentPositionY> previousPositionY && scrollBottom == 0）...一個黑客的位雖然... – Nitin

我似乎無法理解爲什麼它不與你們的所有幫助，甚至是工作，所以我放棄了，決定去使用此代碼至極不是解決辦法，但更多的替代：

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;}

來源

2015-11-08 01:49:42 Jackymamouth

https://www.developphp.com/video/JavaScript/Scroll-Load-Dynamic-Content-When-User-Reach-Bottom-Ajax – Jackymamouth

當滾動到頂部而不是底部時添加元素

回答

相關問題