javascript - 如何处理固定定位元素的 "scroll"和 "zoom"事件？

Question

所以我有一个假定固定位置的元素，我想将其固定在右上角的视口(viewport)上。

这是 HTML:

<div class = "header">
<p>This is a heading with an absolute position</p>
</div>

和CSS:

.header {
position: absolute;
right:10px;
top: 10px;
}

在您使用笔记本电脑向右滚动或使用移动设备放大之前，它会按需要工作。这两个事件中的任何一个都会将元素向左移动，具体取决于事件的范围。

我想出了两个解决方案:

1:在顶部制作一个宽度为100%的div容器，并使元素相对于容器。 这失败了，因为当我滚动窗口时容器没有相应地扩展

2:添加一个事件监听器，监听两个事件scroll和touchend。

$(window).scroll(function(){
$(".header").css({"right": "10px", "top": "10px"});
});

 $(document.body).bind("touchend", function(){
  $(".header").css({"right": "10px", "top": "10px"});
});

我想在每个选定事件中更新元素并使其始终相对于视口(viewport)处于相同位置，但此方法也失败了。看起来 css 只会根据原始视口(viewport)定位元素

这个问题有没有简单有效的解决方案？

Answer 1

如果您尝试将某些内容锚定到视口(viewport)，请使用固定位置:

position: fixed;