淡出元素，當用戶到達屏幕的底部

Question

我有一個始終保持5％的屏幕底部（位置：固定;底部：5％;）的元素。

這只是一個提示，說「向下滾動」。當你到達屏幕的底部時，我想讓它淡出。

如何檢測用戶是否已到達屏幕底部？

Answer 1

使用jQuery滾動（）方法：

var fadeFlag = false; 

$(window).scroll(function(e) { 

    // Check if we reached bottom of the document and fadeOut the target element 
    if($(window).height() + $("html").scrollTop() == $(document).height()-1) { 

     $('#target').fadeOut(); 
     fadeFlag = true; 

    } else { 
     // Here you can do fadeIn 
     if(fadeFlag) $('#target').fadeIn(); 

     fadeFlag = false; 
    } 
}); 

我已使用$（「html」）而不是$（窗口）因爲它不會讓你在IE8中遇到麻煩

Answer 2

你需要獲取文檔的寬度與窗口寬度計算它和滾動偏移：

if (documentWidth == (windowWidth + scrollOffset)) { 
    $('#hint').fadeOut(); 
} 

這裏是類似的討論：Check if a user has scrolled to the bottom