如何处理固定位置元素的“滚动”和“缩放”事件？

Question

所以我有一个固定位置的元素，我想将它固定在右上角的视口上。

这是 HTML：

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

和 CSS：

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

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

我想出了两个解决方案：

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

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

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

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

我想在每个选定的事件中更新元素并使其始终相对于视口处于相同的位置，但这种方法也失败了。似乎css只会根据原始视口定位元素

对于这个问题是否有简单而有效的解决方案？

Answer 1

如果您试图将某些东西锚定到视口，请使用固定位置：

position: fixed;