如何强制粘性导航栏“覆盖”其内容答案

【问题标题】：How do I force a sticky navbar to "overlay" its content如何强制粘性导航栏“覆盖”其内容
【发布时间】：2019-08-23 23:50:15
【问题描述】：

假设我有一个如下所示的导航栏：

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
}

.container {
  width: 100px;
  height: 100%;
  transform: translateX(50px);
  /* An example transform (I can't use position: fixed) */
  background-color: green;
  overflow-y: scroll;
}

.navbar {
  width: 100%;
  height: 50px;
  background-color: rgba(255, 255, 0, 0.5);
  top: 0;
}

.navbar.sticky {
  position: -webkit-sticky;
  position: sticky;
}

.navbar.fixed {
  position: fixed;
}

<div class="container">
  <div class="navbar sticky">
  </div>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

正如您在滚动之前看到的那样，粘性导航栏最初位于内容段落的上方。但是，如果导航栏类从sticky 更改为fixed，则导航栏会覆盖内容（如我所愿），但它不会随容器滚动，因为它已被转换。

如何强制粘性导航栏将其后的内容放置在其下方，以使其始终像其后内容的叠加一样？

如果上述方法不可行，那么如何强制固定导航栏在转换后的容器中随用户滚动？请注意，我想避免类似于 this answer 的内容（其中是我目前正在使用的），因为它会在滚动时导致固定容器上的抖动。

【问题讨论】：

满足条件后，需要 JS 将sticky 切换为fixed。 CSS 做不到。
@Paulie_D 所以没有办法让一个位置：粘性对象最初位于它之后的内容之上？
不...sticky不会覆盖AFAIK这样的内容，也不打算这样做。
@Paulie_D 那是……不幸。 position:fixed 有什么替代方法不需要我不断地用 JS 更新导航栏的位置吗？
除非您将粘性导航高度的负值margin-top 设置为导航之后的第一个元素 (.navbar + * { margin-top: -50px;})。但可能并不理想

标签： html css scroll css-position sticky

【解决方案1】：

使用 margin-bottom 从导航栏减去导航栏的高度将起作用。

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
}

.container {
  width: 100px;
  height: 100%;
  transform: translateX(50px);
  /* An example transform (I can't use position: fixed) */
  background-color: green;
  overflow-y: scroll;
}

.navbar {
  --navbarheight: 50px;
  width: 100%;
  height: var(--navbarheight);;
  background-color: rgba(255, 255, 0, 0.5);
  top: 0;
}

.navbar.sticky {
  position: -webkit-sticky;
  position: sticky;
  margin-bottom: calc(0px - var(--navbarheight)); /* or -50px in other words */
}

.navbar.fixed {
  position: fixed;
}

<div class="container">
  <div class="navbar sticky">
  </div>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

【讨论】：