Javascript 相对于浏览器大小将div定位在上方或下方

女士们，先生们。我有一个

#quicklook

分区

#quicklook{
    height: 500px;
    width: 400px;
    background: #fff;
    position: absolute;
    margin-top:5px;
    margin-left:15px;
    box-shadow: 0 0 5px #BEBEBE;
    color:#000;
    z-index:100;
    display:none;
}

JQUERY

$(document).on('mouseenter','.quicklook-link',function(){
    var quicklookLink = $(this);                
    quicklooktimerShow = setTimeout(function(){     
        createQuickLook(quicklookLink);

          //some ajax request to load content in '#quicklook'   
        },3000);

}).on('mouseleave','.quicklook-link',function(){

            clearTimeout(quicklooktimerShow);
            removeQuickLook();   

});





    function createQuickLook(div){
        removeQuickLook();
        $('<div>',{
            id:'quicklook'
        }).append($('<div>',{ id:"quicklook-triangle"})).appendTo(div);

            $('#quicklook').show();             


    }
    function removeQuickLook(){
        $('#quicklook').remove();
        $('#quicklook-triangle').remove();
    }

$（document）.on（'mouseenter'，'.quicklook link'，function（））{
var quicklookLink=$（这个）；
quicklooktimerShow=setTimeout（函数（）{
创建QuickLook（quicklookLink）；
//某些ajax请求加载“#quicklook”中的内容
},3000);
}).on（'mouseleave'，'.quicklook link'，function（）{
clearTimeout（quicklooktimerShow）；
移除QuickLook（）；
});
函数createQuickLook（div）{
移除QuickLook（）；
$('',{
id:'quicklook'
}).append（$（''，{id:“quicklook三角形”}））.appendTo（div）；
$（'#quicklook'）.show（）；
}
函数removeQuickLook（）{
$（'#quicklook'）。删除（）；
$（“#quicklook三角形”）.remove（）；
}

当前，当我将鼠标悬停在

.quicklook链接上超过3s时，将创建
#quicklook

我希望发生两件事


当我执行
.mouseenter.quicklook链接时，如果没有足够的空间
在屏幕的视口下方，然后将
#quicklook
定位在屏幕上方
.quicklook链接
否则让它保持在下面。就像在美国一样
谷歌+

当鼠标从
离开时，另一个bug就出现了。quicklook链接
调用了
removeQuickLook（）
函数，并调用了
#quicklook
隐藏的但我想用几秒钟的时间（3-4秒）来掩盖这一点
#快速查看
对于时间延迟问题，您是否尝试过实施此方法