div的onscroll函数不能使用getBoundingClientRect（）方法

Question

我为div工作了一个onscroll函数：

window.onscroll = function () {
  document.getElementById("faceExtractor").style.top = (($(window).scrollTop()) + 50) + "px";
};

工作得很好。现在我使div元素也可以拖动，这意味着在有人拖动div但向下然后滚动之后，由于onscroll功能，div再次被放置在页面顶部50px之下。我想解决这个问题，以便div在滚动的同时保持它的位置，即使有人把它扯到一个特定的位置，我也试过了：

window.onscroll = function () {
  topDistance = document.getElementById("faceExtractor").getBoundingClientRect().top;
  if (topDistance < 50){
    document.getElementById("faceExtractor").style.top = (($(window).scrollTop()) + 50) + "px";
  } else {
    var gap = ($(window).scrollTop()) + topDistance;
    document.getElementById("faceExtractor").style.top = gap + "px";
  }  
};

但是那时的onscroll根本不起作用。如何修改我的onscroll以使div保持位置并且不总是放在页面顶部或静态位置？

Answer 1

window.onscroll = function () {
  positionFromTop = document.getElementById("faceExtractor").offsetTop;
  topDistance = document.body.parentElement.scrollTop+positionFromTop;
  if (topDistance < 50){
    document.getElementById("faceExtractor").style.top = topDistance+ "px";
  } else {
    var gap = topDistance;
    document.getElementById("faceExtractor").style.top = gap + "px";
  }  
};

试试这个方法。并且，给予：绝对＆＃39;对于＆＃39; faceExtractor＆＃39;格。