如果 div 重叠，则在 window 中重新定位

Question

我正在使用 jQuery 在我的页面上动态创建 div。如果鼠标点击位置在屏幕下方，div 会部分显示在屏幕外。基本上取屏幕 680px，鼠标在 600px 处单击，div 高度 300，div 的下部 220px 将超出屏幕，因为溢出属性设置为隐藏。

我想要实现的是一个函数，该函数将计算将其向上移动多少以确保 div 完全可见。

不幸的是，我没有用。感谢任何帮助，甚至是通过 CSS 或其他方式的替代解决方案。

这个函数应该 return 值 top px。基本上它应该计算 div 超出屏幕高度的多少，并将其从当前鼠标位置移除，以使 div 适合。

Javascript:

var mousex;
var mousey;
var currshowingid;
var mousepos;

$( document ).on( "mousemove", function( event ) {
    mousex = event.pageX;
    mousey = event.pageY;
    //console.log( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});

function xfromtop(el) {
    if ((mousey + $(el).height()) > $(window).height()) {
        fromtop = mousey - ((mousey + $(el).height()) - $(window).height())*1.1;
        fromtop = fromtop.toString() + "px";
    } else {
        fromtop = mousey.toString() + "px";
    }
    return fromtop;
}

这将创建 div 运行时并使用 xfromtop() 到 top CSS 属性

function showdriverdetails(id) {
    $('div[id^="driver_"]').remove();
    // Add div and place in at mouse position 
    $("#main").append("<div class='driverdetails dets' id='driver_" + id + "'>");
    $("#driver_" + id).load("ajax/driver_info.php?id=" + id).fadeIn().draggable();
    $("#driver_" + id).css("top", xfromtop($("#driver_" + id)));
}

CSS:

div.driverdetails {
    width: 70%;
    height: auto;
    min-height: 300px;
    max-height: 400px;
    left: 18%;
}

.dets {
    z-index: 1000;
    position: fixed;
    padding: 2px;
    border: solid #5c6cb0 2.5px;
    background-color: white;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    display: none;
}

HTML:

<button onclick="showdriverdetails(100)">SHOW</button>

Answer 1

高度属性不考虑边距、填充和边框。您应该使用 jQuery 的 outerHeight 来获取 div.

的完整高度

function xfromtop(el) {
    var elHeight = $(el).outerHeight();
    var windowHeight = $(window).height();

    if ((mousey + elHeight) > windowHeight) {
        fromtop = windowHeight - elHeight;
        fromtop = fromtop.toString() + "px";
    } else {
        fromtop = mousey.toString() + "px";
    }
    return fromtop;
}

如果 div 重叠，则在 window 中重新定位

Repositioning a div in window if it overlaps

javascript

jquery

css

positioning