网页中点击按钮调出的筛选浮动窗口如何能锚定按钮

Question

我做了一个数据库的网页，在表格的每列首有一个箭头按钮，点击它可以调出筛选的窗口网页，我是用JS的hidden来实现的。但在左右拖动网页的时候，这个窗口不能跟着动，怎么做才能让它能随网页一起动呢？
目前筛选窗口的CSS position是fix，也试过设为relative，那窗口就会一直在左边，也不行。搞了两个星期了，一直搞不定，请各位不吝指点一二。

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如需一对一服务私聊我哦

问题：如何让筛选窗口能随网页一起动？ 解决方案：

1. 将筛选窗口的CSS position属性设为fixed，并设置left和top属性值。这样筛选窗口将相对于浏览器窗口固定位置显示。但这样在左右拖动网页时，筛选窗口仍然不会随着移动。 示例代码：

#filter-window {
  position: fixed;
  top: 50px;
  left: 50px;
}

1. 使用JavaScript监听浏览器的scroll和resize事件，监听页面滚动和窗口大小变化，并将筛选窗口的位置动态调整。 示例代码：

window.addEventListener('scroll', function() {
  var filterWindow = document.getElementById('filter-window');
  filterWindow.style.top = window.pageYOffset + 50 + 'px';
});
window.addEventListener('resize', function() {
  var filterWindow = document.getElementById('filter-window');
  filterWindow.style.left = window.innerWidth - filterWindow.offsetWidth - 50 + 'px';
});

上述代码中，我们使用了window.pageYOffset获取当前页面滚动高度，window.innerWidth获取当前窗口宽度。根据窗口宽度和筛选窗口宽度，我们可以计算筛选窗口距离窗口左侧的距离，并将其设置为筛选窗口的left属性值。这样就可以让筛选窗口随着网页左右移动。