Question

我有一个div（#dynamic），当用户向下滚动页面时，我想获取其相对于浏览器视口的位置值。

当我尝试将headingDiv div的底部位置设置为#dynamic div的顶部时，当前my code snippet会返回不正确的结果。解决这个问题可以解决我的问题。要清楚，橙色框应该随着文本的出现而缩小。

我看到this question用户'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>

Answer 1

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

elem.offsetTop会为您提供页面顶部的偏移量。 window.scrollTop将为您提供从页面顶部查看内容的偏移量。因此，elem.offsetTop - window.scrollTop将为您提供从视口顶部开始的元素顶部有多少像素，并将所有这些像素考虑在内。

Answer 2

您正在获取动态div的顶部位置，该位置是从窗口顶部开始测量的...但是然后使用它来设置标题的底部。＆＃34;底部＆＃34; css属性是从窗口或页面的底部 测量的。

当#dynamic靠近窗口顶部时，它会变小（比如20px）。但是你希望标题的底部从窗口底部（距离底部20px）远离。所以你需要从另一个中减去一个。

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

jsFiddle

如何获取元素相对于broswer视口的位置

2 个答案: