js,如何监听，一个元素，随着滚动，resize , 相对于屏幕的位置变化

在JavaScript中，监听元素随着滚动及相对于屏幕位置的变化，通常需要结合`MutationObserver`、`scroll`事件以及计算元素的相对定位。下面是一个基本的例子：

// 获取需要监听的元素
const targetElement = document.getElementById('your-element-id');

// 定义计算元素位置的函数
function calculatePosition() {
  const rect = targetElement.getBoundingClientRect();
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;

  console.log(`元素位置: Top: ${rect.top + scrollTop}px, Left: ${rect.left + scrollLeft}px`);
}

// 初始化元素位置
calculatePosition();

// 创建MutationObserver监听元素尺寸变化
const observer = new MutationObserver(() => {
  // 触发计算并更新位置
  calculatePosition();
});

observer.observe(targetElement, {
  attributes: true,
  childList: true,
  subtree: true, // 如果元素有子元素也想监听，设为true
  attributeFilter: ['style'] // 只对style属性的变化感兴趣
});

// 当页面滚动时，计算并记录新位置
window.addEventListener('scroll', calculatePosition);

// 如果你想监听resize事件，可以在下面添加：
// window.addEventListener('resize', calculatePosition);

在这个例子中，我们首先获取目标元素，然后在滚动和窗口大小改变时（resize事件），触发`calculatePosition`函数，该函数会计算元素的当前相对于视口的位置。