jQuery保持弹出窗口离开屏幕底部

Question

我在网格中有图片库。当您将鼠标悬停在图像上时，较大的一个出现在名为.popup的悬停div中。当用户将鼠标悬停在靠近可见浏览器窗口底部的图像上时，我需要保持此弹出窗口不显示。这是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：在将鼠标悬停在图像上时可见。这是我的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
 }