javascript - 使用响应式布局获取 Div 位置

Question

我在页面上有一个 div，当按下按钮时它充当整个页面的覆盖层。这是我遇到的问题:

显示叠加层时，我使用 Javascript 使用以下方法将叠加层从页面上的 div 顶部开始定位:

var elementTop = $("#myVideo").offset().top;
$('#lightBoxBackground').css('top', elementTop);

但是，当我改变页面的大小时，而不是动态获取 myVideo div 的新位置，它似乎保留了原始位置。因此，当我展开我的页面时，overlay div 停留在它打开的位置，而不是随着 myVideo div 不断移动。

有没有办法在使用 html、css 和 javascript 更改页面布局时动态地继续获取 div 的新位置，以便我的覆盖 div 与 myVideo div 一起移动？我是 JavaScript 的新手，已经检查了很多问题，但没有发现任何有用的东西。

感谢您的帮助。

Answer 1

使用 javascript，您可以使用 .resize() 监听窗口上的宽度/高度变化

$(window).resize(function() {
    //resize just happened, update your positioning values
});

注意:此解决方案使用 jQuery - https://api.jquery.com/resize/