javascript - 相对于视口(viewport)定位的固定元素(左)和静态元素(右)

Question

这可能是不可能的，但我必须尝试: 让我们想象一个固定在视口(viewport)上的元素。

Position: fixed;  
Top: 30px;
Left: 0px;

但是相对于页面(容器)上某个元素的右侧具有 position: static 并且该元素不 float 在固定元素内。它位于页面外部、独立、静态的位置:

我知道，如果我设置固定元素的正确位置，通常会相对于视口(viewport)的右侧进行设置。

因此，在这种情况下，调整浏览器大小时，固定元素的右侧将不会相对于视口(viewport)的右侧，而是相对于容器的右侧。

也许是一些 JavaScript？ jQuery？

Answer 1

如果您事先知道“容器”的右边缘所在的位置(基于其宽度/左偏移量)，您可以使用 CSS3 calc() function 在大多数现代浏览器中实现所需的布局。 。在伪代码中，right 的公式如下所示:

right: calc(100% - container_width - container_left_offset);

这是代码的工作演示:

body,
html {
  margin: 0;
}
#fixed {
  background: #CCC;
  height: 30px;
  left: 0;
  position: fixed;
  right: calc(100% - 100px - 300px);
  top: 30px;
}
#static {
  background: #999;
  height: 800px;
  margin-left: 300px;
  width: 100px;
}

<div id="fixed">
  Fixed
</div>
<div id="static">
  Container
</div>

但是，如果无法事先知道容器的右边缘位置(例如动态宽度/可变内容)，您可能必须采用 JavaScript 路线。希望这可以帮助!如果您有任何疑问，请告诉我。