如何获得元素相对于溴氰菊视图的位置？

Question

我有一个div (#dynamic)，当用户滚动页面时，我想获得它相对于浏览器视图端口的位置值。

当前，我的代码片段在尝试将headingDiv div的底部位置设置为#dynamic div的顶部时返回不正确的结果。解决这个问题会解决我的问题。要清楚的是，橙色的盒子应该缩小当文本出现。

我见过这个问题，用户'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

你得到了动态div的顶部位置，这个位置是从窗口的顶部测量的.然后用它来设置标题的底部。“底部”css属性是从窗口或页面底部度量的。

当#dynamic靠近窗口顶部时，它会变小(比如20 it )。但是，您希望标题的底部离窗口底部更远(从底部20 of )。所以你需要从另一个减去一个。

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

jsFiddle

Answer 2

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

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