用jquery的offset函数可以很简单地获取某个元素的top，也就是离document的距离。但是有一个地方需要注意，这是容易引起bug的地方。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="jquery-2.2.3-unzip.js"></script>
<img src="" style="height: auto" />
<div id="test">hellow world
</div>
<script type="text/javascript">
setTimeout(() => {
$("img").attr('src', '1.png');
},0)
console.log($("#test").offset().top);
</script>
</body>
</html>
运行上面的代码，然后再打开console运行console.log($(“#test”).offset().top);会惊讶地发现这两个值并不一样，印象中，一个DOM的top是不会变的，但是这里是什么问题呢，问题在于，如果一个DOM节点的上面有需要一部加载的资源时并且这个资源的高度是auto时，例如图片，可能会导致问题，因为当你进入页面时，你去获取某个DOM节点A的top时，这时图片还没有加载回来，并且他的高度设置成auto，所以他的大小是0px，等图片加载回来时，A的top已经变了，值差不多是等于原来的值加上图片的大小，所以这个地方需要注意。如果图片的大小是固定大小，比如height:200px，就不会有这个问题。
转载请注明原文地址: https://ju.6miu.com/read-7638.html
