在内容区域上居中固定 div

Question

我有一个带有可折叠侧边栏（黑色区域）的页面。在右侧，我们有内容区域。在我的示例中，我有一个灰色方块代表一张桌子。现在我有一个 div 漂浮在这张桌子的顶部（图片上的红色）并使其固定在屏幕上。所以它随着页面滚动，但以内容区域为中心。参见示例 1。

现在它以视口为中心，这意味着侧边栏也被考虑在内。这使得红色方块看起来像示例 2。

示例 1：

示例 2：（当前状态）

有谁知道将固定 div 居中到内容区域而不是视口的任何 CSS 技巧。也许在左侧使用 calc 或更多边距？

代码笔

这里是演示示例2的代码笔

<div class="sidebar"></div>
<div class="content">
  <div class="content-body">
    <p>Content in here</p>
  </div>
</div>

<div class="popup">
  <p>This should be centered on content instead of the viewport</p>
</div>

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 250px;
  background-color: #000;
}

.content {
  width: calc(100% - 250px);
  position: absolute;
  top: 0;
  right: 0;
  background-color: #efefef;
}

.content-body {
  width: 100%;
  height: 2000px; /* to create some scrollable page*/
  max-width: 1200px;
  margin: 1em auto;
  background-color: #afafaf;
}

.popup {
  position: fixed;
  width: 100%;
  max-width: 1200px;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: red;
  margin: 1em auto;
}

https://codepen.io/finiox/pen/mdmJVwK

Answer 1

如果我正确理解您的问题，您可以将 left: 0 更改为 left: 250px 以表示 .popup

Answer 2

如果侧边栏具有静态宽度。这是在这种情况下。您需要使用 transform 属性并将其转换为侧边栏宽度的一半。

transform: translate(125px, 0);

或者，您可以将侧边栏宽度存储在 root 变量中，并使用 calc 获得一半的宽度。

:root {
  --sidebar-width: 250px;
}

.popup {
  transform: translate(calc(var(--sidebar-width)/2), 0);
}

Answer 3

如果侧边栏不总是可见，则添加一个类（例如：is-sidebar-active），然后您可以使用类似 .is-sidebar-active + nextSibling + nextSibling 的内容选择弹出窗口。然后只需在弹出窗口中添加 left: SIDEBAR_WIDTH。

示例：

:root {
  --sidebarWidth: 250px;
  
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebarWidth);
  background-color: #000;
}

.content {
  width: calc(100% - 250px);
  position: absolute;
  top: 0;
  right: 0;
  background-color: #efefef;
}

.content-body {
  width: 100%;
  height: 2000px; /* to create some scrollable page*/
  max-width: 1200px;
  margin: 1em auto;
  background-color: #afafaf;
}

.popup {
  position: fixed;
  width: 100%;
  max-width: 1200px;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: red;
  margin: 1em auto;
  z-index: 9;
}

.is-sidebar-active + .popup {
  width: calc(100% - var(--sidebarWidth));
  left: var(--sidebarWidth);
}

<div class="sidebar is-sidebar-active"></div>

<div class="popup">
  <p>This should be centered on content instead of the viewport</p>
</div>

<div class="content">
  <div class="content-body">
    <p>Content in here</p>
  </div>
</div>