某些页面上的 jQuery 偏移量计算不正确

Question

我正在使用 jQuery offset().top 从文档窗口顶部计算超链接的像素，以便在悬停时，工具提示可以出现在其上方。

默认情况下，工具提示的 css 的绝对位置为顶部 0 和左侧 0。当链接悬停时，它会从文档顶部计算其位置，并将其用作工具提示的 css 顶部位置。

问题在于，在某些页面上，offset 可以完美地计算链接的位置，而在其他页面上，大约 50 像素太多了。我不知道为什么。

$(".tiptrigger").mouseenter(function() { 
    var s_id = $(this).attr('id');
    var calc = $(this).offset().top; 
    $("#tip-"+s_id).css({"margin-top": calc+"px"});
});

Answer 1

尝试使用fixed 代替absolute 作为弹出元素。如果您没有对 body 应用任何不必要的填充，那么 offset().top 应该可以工作。

如果仍然不准确而不是 .offset().top 给https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect一个机会

Answer 2

.offset() 有这个limitation：

注意：jQuery 不支持获取隐藏元素的偏移坐标或考虑在 body 元素上设置的边框、边距或填充。

所以你的 jQuery 可能是正确的，但如果你的身体上有一些填充/边距，你会遇到不正确的偏移。删除它或将其包含在您的计算中：

var bodyOffset = $('body').css("margin-top") + $('body').css('padding-top') + $('body').css('border-top');
var calc = $(this).offset().top + bodyOffset;