如何在用戶觸及頁面底部時顯示div？

當用戶滾動到頁面的底部我想顯示一些div，當然用jQuery。如果用戶滾動回頂部，div淡出。那麼如何計算視（或任何是正確的名稱）:)如何在用戶觸及頁面底部時顯示div？

感謝

2010-05-04 Kenan

你是在談論一個將會有一個立場的div：fixed;或只是在內容的底部的div？ – codedude 2010-05-04 19:18:42

它將固定位置在頁面的底部，也許「底部：50px」 – Kenan 2010-05-04 19:23:31

這一定讓你開始：

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2768264</title> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $(window).scroll(function() { 
        if ($('body').height() <= ($(window).height() + $(window).scrollTop())) { 
         alert('Bottom reached!'); 
        } 
       }); 
      });  
     </script> 
     <style> 
      body { margin: 0; } 
     </style> 
    </head> 
    <body> 
     <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
     <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
     <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
     <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
    </body> 
</html>

這假定body有0一個margin。否則，您需要將頂部和底部邊距添加到$('body').height()。

來源

2010-05-04 20:10:33 BalusC

謝謝，但這並不工作:( – Kenan 2010-05-04 20:34:23

你檢查邊距？我更新了答案，包括一個SSCCE – BalusC 2010-05-04 20:40:50

是啊，邊距爲0，我正在使用CSS重置，並且還使用jQuery 1.3.2？ – Kenan 2010-05-04 20:44:52

的$（document）。 scrollTop（）應該給你滾動條的位置。你檢查文檔高度。然後淡入或淡出div。

來源

2010-05-04 19:52:16

下面是對BalusC代碼中的小編輯，如果你想顯示一個div不是一個JavaScript彈出：

<head> 
    <title>SO question 2768264</title> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      $(window).scroll(function() { 
       if ($("body").height() <= ($(window).height() + $(window).scrollTop())) { 
        $("#hi").css("display","block"); 
       }else { 
        $("#hi").css("display","none"); 
       } 
      }); 
     }); 
    </script> 
    <style> 
     body { margin: 0; } 
     #hi { 
      background: red; color: #FFF; position: fixed; bottom: 0px; right: 0px; display: none; 
     } 


    </style> 
</head> 
<body> 
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 

    <div id="hi">HIIIIIIIIIIII</div> 
</body>

來源

2012-03-20 03:18:21

嗨。比方說，而不是「身體」，我正在使用div ID，以及如果我希望「hi」在我處於滾動div的80％時出現，例如？ :)投票將付出很好的回答:) – 2012-06-13 13:11:15

您可以使用以下方法：

$(window).scroll(function() { 
    if ($(document).height() <= ($(window).height() + $(window).scrollTop())) { 
     //Bottom Reached 
    } 
});

我用這個，因爲我有

body { 
    height:100%; 
}

希望這有助於

來源

2013-03-21 20:17:05

謝謝你，我完全是一樣的情況。你的解決方案爲我工作！ – Adrien 2014-04-04 17:10:21

@Adrien不客氣，我的朋友。很高興我能幫上忙：） – 2014-04-09 11:58:14

如何在用戶觸及頁面底部時顯示div？

回答

相關問題