Javascript 添加滚动和不添加滚动的元素各不相同

我有两个按钮，一个在顶部，另一个在底部。当我点击顶部按钮时，它工作正常。当我向下滚动到底部按钮并再次单击按钮（相同的功能）时，它会在元素后面添加一些where。我是用绝对法计算排名的。获得与身体的关系

那么如何处理这种情况呢

Js代码：

const h1All = document.getElementsByTagName("h1");

function addElement() {
  let div = document.createElement('div');
  div.innerText = "I am here";
  div.style.border = "1px solid green";
  div.style.position = "absolute";
  let h1 = h1All[0];
  h1.style.border = "1px solid red";
  let parentPos =  h1.getBoundingClientRect();
  console.log(parentPos)
  document.body.appendChild(div);
  div.style.top = parentPos.y + parentPos.height + "px";
}

HTML:

.mydiv{
边框：1px纯绿色；
高度：600px；
}

你好，普朗克！
这里有一些部门信息
点击我
单击我

如果您想要绝对定位，您需要考虑滚动。您可以使用

窗口。滚动
。注意
addElement
最后一行的更改：


const h1All=document.getElementsByTagName（“h1”）；
函数addElement（）{
设div=document.createElement（'div'）；
div.innerText=“我在这里”；
div.style.border=“1px纯绿色”；
div.style.position=“绝对”；
设h1=h1All[0]；
h1.style.border=“1px实心红色”；
让parentPos=h1.getBoundingClientRect（）；
文件.正文.附件（div）；
div.style.top=parentPos.y+parentPos.height+window.scrollY+“px”；
}
.mydiv{
边框：1px纯绿色；
高度：600px；
}
你好，普朗克！
这里有一些部门信息
点击我
单击我
您的任务是什么？我看不懂你的呼吁（我需要用滚动键定位元素。当我点击底部按钮调用该函数时，元素消失
 <h1>Hello Plunker!</h1>
    <div class="mydiv">some div info goes here
      <button onclick="addElement()">Click Me </button> //works fine.
    </div>
    <button onclick="addElement()">Click Me </button> //it's not. after scroll down!!