jQuery保持從屏幕底部彈出

Question

我有一個網格中的圖像庫。當你將鼠標懸停在圖像上時，一個較大的圖像出現在懸停的div中，稱爲.popup。當用戶將鼠標懸停在靠近可見瀏覽器窗口底部的圖像上時，我需要保持此彈出框不顯示屏幕。這裏是html

 <li> 
      <div class="inner"> 
       <img src="photos/photo.jpg"> 
       <div class="subcat-image-name"> 
        photo 
       </div> 
      </div> 
      <div class="popup"> 
       <img src="photos/photo.jpg"> 
       <div class="popup-text"> 
        some text 
       </div> 
      </div> 
     </li> 

.popup div設置爲可見性：隱藏然後可見性：懸停在圖像上可見。這裏是我的jQuery保持彈出屏幕上，但我不能讓它做任何事情：

$('.popup').bind('visibility:visible', function(event) { 
    w = $(window).height(); 
    var position = $(this).position(); 
    var distancefrombottom = w - position.top; 
    if (distancefrombottom < 500) { 
     $(this).css('bottom','20px'); 
    } 
}); 

Answer 1

您可以嘗試使用position:fixed爲popup類。這使您的彈出窗口顯示在您滾動頁面的任何位置。

.popup{ 
    position: fixed 
}