代码之家 › 专栏 › 技术社区 › Lennie

div的onscroll函数不能与getBoundingClientRect()方法一起使用

css jquery javascript

Lennie · 技术社区 · 6 年前

我为一个div实现了一个onscroll函数,它的工作方式如下:

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

效果很好。现在,我使div元素也可拖动,这意味着在有人拖动div a但向下然后滚动之后,由于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,使div保持其位置,而不总是放在页面顶部或静态位置?

1 回复 | 直到 6 年前

SOUser 6 年前

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";
  }  
};

试试这个方法。并且,为“faceExtractor”Div指定“position:absolute”。

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前