如何获取隐藏对​​象的位置

Question

所以我有一个我正在研究的megamenu，我希望它符合屏幕大小。当子菜单被放下时，我不希望它离屏幕边缘。我的计划中的打嗝是我不知道如何在浏览器实际可见之前检测元素的位置。有没有办法实现这个目标？

Answer 1

在浏览器可见之前，元素不具有位置。

Answer 2

您可以为元素赋予0.01的不透明度，然后检查其位置。这使得可见但仍然对普通用户不可见。

var offset = $(selector).show().css('opacity',0.01).offset();
$(selector).css('opacity',1).hide();

Answer 3

您可以显示元素以获取其位置并在之后隐藏它：

var element = $('#element');
element.show();
var position = element.position();
element.hide();

DEMO

Answer 4

var offset = $(selector).fadeTo(1, .01).offset();
$(selector).hide();

Answer 5

if($(this).offset().left - 90 < window.screenLeft) { 
    $(this).next().css('left','0')
}
else if($(this).offset().left + $(this).outerWidth() + 90 > window.innerWidth) {
    $(this).next().css('right', '0')
}
else { 
    $(this).next().css('left', '-90px')
}