offset（）。顶部与窗口顶部的偏移量

Question

所以我试图通过javascript/jquery执行一些计算，以便使我的web应用程序中的元素响应。我明白，通过使用object.offset().top我可以获得我的内容的顶部和对象的顶部之间的像素数。但是，我的设计的一部分是，某些元素粘贴到屏幕的顶部，而其余部分滚动过去，然后object.offset().top与以前相同的方式没有用处。

我想知道的是：是否有一种方法可用于确定我的对象与用户屏幕顶部之间的距离（而不是对象与我的内容顶部之间的距离）？我正在使用最新版本的Chrome。

干杯

Answer 1

有没有方法可用于确定我的对象，并在用户屏幕的顶部之间的距离

是的，有 - getBoundingClientRect：

“返回的值是一个TextRectangle对象，它包含只读left,top,right和bottom属性，以像素为单位描述边框。顶部和左侧是相对于左上角的视口的“

我在这里做了（超过）原油例如，http://jsfiddle.net/7ceL8p3s/ - 滚动的红色方块进入视野，并点击它 - 它会记录每次单击时将控制台的对象设置为TextRectangle，您将看到top和left值与视口相关。 （jsfiddle结果框的视口是 - 转到http://jsfiddle.net/7ceL8p3s/show/以在完整窗口中查看它。）

而且，如果您滚动它以使该框在顶部视口边框上部分偏离视图，以便仅它的下半部分是可见的，你也会得到负值top值。 （若left相同，如果您有一个布局，元素可能会向左滚动到视图外部）