获取相对于视口顶部的元素位置

Question

我需要获取元素相对于视口顶部的顶部位置,而不是整个文档.

我尝试offset().top;返回相对于文档的顶部位置,并且我尝试scrollTop()了总是返回0,无论该元素是否在视口中实际可见.

Answer 1

你可以用它来计算

$('#element').offset().top - $(window).scrollTop()

工作实例

function get(){
  $('#output').html($('#element').offset().top - $(window).scrollTop());
}

get();
$(window).scroll(get);

#element {
  width:100px;
  height:100px;
  background:red;
}

#output {
  position:fixed;
  background:#000;
  color:#fff;
  width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="element"></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

Answer 2

对于那些寻找非 jquery 解决方案的人：

let el = /* get your el */

let top = el.getBoundingClientRect().top + 
          el.ownerDocument.defaultView.pageYOffset