javascript - 如果底部没有适当的空间，弹出窗口应该显示在元素的顶部

Question

如果顶部没有适当的空间，我想在元素顶部显示弹出窗口。目前它隐藏在窗口内，如下图所示:

我可以更新顶部位置，但我只在没有适当空间时才想要，否则没关系。

请告诉我如何确定点击位置是否在窗口边缘附近。

JSFiddle 链接:http://jsfiddle.net/g4g4negf/

我用来获取位置的代码:

$(document).ready( function() {
$('.clickme').on('click', function(e) { 
       $('#popup').offset({ top: e.pageY, left:  e.pageX}).fadeIn(); 
});

Answer 1

查看 this JSFiddle

要检查点击的位置是否靠近窗口边缘，您必须获取窗口的高度 ($(window).height()) 和滚动位置 (window.pageYOffset ).通过将这两个值相加，您可以找到窗口的滚动位置。然后将此总和与 e.pageY+$("#popup").height() 进行比较(这是点击位置的高度与弹出窗口高度的总和)。如果后者小于前者，则表示可以显示弹出窗口。如果 (e.pageY+$("#popup").height())>($(window).height()+window.pageYOffset) 这意味着弹出窗口将溢出窗口的底部边框，那么它的顶部偏移量应该更改为 e.pageY-$('#popup').height()。

这里是完整的函数:

$('.clickme').on('click', function(e) {    
    var h;
    if((e.pageY+$('#popup').height())<($(window).height()+window.pageYOffset)) h=e.pageY;
    else h=e.pageY-$('#popup').height();
           $('#popup').offset({ top: h, left:  e.pageX}).fadeIn(); 
    });