jQuery画面の一番下からポップアップしないようにする

Question

グリッドに画像ギャラリーがあります。画像上にマウスを置くと、大きな画像が.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はvisibility：hiddenに設定され、次にvisibility：visibleが画像上に表示されます。ここでは、画面上にポップアップを保つために、私の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

あなたはクラスpopupために使用position:fixedを試すことができます。これにより、ページをスクロールするたびにポップアップ表示が同じ位置に表示されます。

.popup{ 
    position: fixed 
}