如何获得元素相对于浏览器视窗的位置?

How can I get the position of an element relative to the broswer viewport

本文关键字：位置 浏览器 何获得 元素 相对于      更新时间：2023-09-26

我有一个div (#dynamic)，我想在用户向下滚动页面时获得其相对于浏览器视窗的位置值。

目前，我的代码片段返回不正确的结果，因为我试图将headingDivdiv的底部位置设置为#dynamicdiv的顶部。修复这将解决我的问题。为了清楚起见，橙色框应该随着文本的出现而缩小。

我看到这个问题，用户'codef0rmer'建议使用$("#dynamic").offset().top;，但对我来说，这只是产生了相同的结果。

下面是在jsfiddle中断的情况下的代码:

function sizeHeader() {
  var navPos = document.getElementById("nav");
  var dynPos = document.getElementById("dynamic");
  $("#headingDiv").css("top", navPos.getBoundingClientRect().bottom);
  $("#headingDiv").css("bottom", dynPos.getBoundingClientRect().top);
}
$(window).scroll(function() {
  sizeHeader();
});
window.onload = sizeHeader();
/* Normalisation */
* {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
/* Navigation bar */
nav {
  display: block;
  background-color: black;
  color: #FFFBD0;
  padding: 1%;
  position: fixed;
  right: 0;
  left: 0;
  bottom: auto;
  z-index: 100;
}
/* Main content */
#headingDiv {
  position: fixed;
  left: 0;
  right: 0;
  top: 3em;
  bottom: auto;
  background-color: peru;
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
}
#dynamic {
  padding: 1%;
  position: relative;
  top: 55vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<body>
  <nav id="nav">
    <b>Hello</b>
  </nav>
  <div id="headingDiv"><h1>greetings</h1></div>
  <main id="dynamic">
    <p>ello</p><p>ello</p><p>ello</p><p>ello</p><p>ello</p><p>ello</p>
    <p>ello</p><p>ello</p><p>ello</p><p>ello</p><p>ello</p><p>ello</p>		    <p>ello</p><p>ello</p><p>ello</p><p>ello</p><p>ello</p><p>ello</p>
  </main>
  <script src="main.js"></script>
</body>

您正在获取动态div的顶部位置，这是从窗口的顶部测量的…然后用它来设置页眉的底部。"bottom"css属性是从窗口或页面的底部开始测量的。

当#dynamic靠近窗口顶部时，它会变小(比如20px)。但是你想让的底部远离从窗口的底部(距底部20px)。所以你需要用一个减去另一个。

window.innerHeight - dynamic.getBoundingClientRect().top;

jsFiddle

是否考虑了窗口的滚动位置?

elem.offsetTop将给出页面顶部的偏移量。window.scrollTop将为您提供从页面顶部查看的偏移量。所以elem.offsetTop - window.scrollTop会告诉你元素的顶部距离视口的顶部有多少像素，考虑到所有这些。

相关文章：