通过响应式布局获取Div位置

Question

我在页面上有一个div，当按下按钮时，它作为整个页面的叠加层。这是我遇到的问题：

当显示叠加层时，我使用Javascript通过以下方法定位从页面顶部开始的叠加层：

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

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

有没有办法动态地继续获取div的新位置，因为页面布局使用html，css和javascript更改，这样我的overlay div会随myVideo div一起移动？我是JavaScript的新手，已经检查了很多问题，但没有找到任何有用的东西。

感谢您的帮助。

Answer 1

使用javascript，您可以使用.resize()

监听窗口的宽度/高度变化

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

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