html - 粘性定位的 child 忽略 parent 的填充

Question

如何防止粘性元素位于标题后面？

当前代码段在父级上使用填充顶部，我也尝试在额外的子级上使用 margin-top 或透明的 50px 边框，但它似乎不起作用。

我知道我可以很容易地在这种情况下使用 top: 50px; 在粘性上，但我想将这部分集成到 React 组件中，并且使用特定大小使得组合不同组件变得更加困难，因为它们所有人都必须共享最大尺寸。

怎样才能让header/padding变得“实心”，让sticky无法通过？

body{
  background: rgb(200,200,200);
  padding:0px;
  margin:0px;
}
header{
  height: 50px;
  font-size: 2em;
  background: aqua;
  opacity: 0.6;
  text-align:center; 
  position: fixed; 
  width: 100%;
}
.content-wrapper{
  padding-top: 50px; /* keeps the header space */
  
  height: 800px; /*for demo*/
}
.sticky{
  position: sticky;
  top:0;
}

<header>header</header>
<div class="content-wrapper">
  <div class="sticky">
  Hello, I am a sticky element
  <div>
<div>

Answer 1

不确定这是否有我不知道的缺点，或者它在您的情况下是否可行，但 translateY 似乎有效。不过，这绝对是 hacky。

body{
  background: rgb(200,200,200);
  padding:0px;
  margin:0px;
}
header{
  height: 50px;
  font-size: 2em;
  background: aqua;
  opacity: 0.6;
  text-align:center; 
  position: fixed; 
  width: 100%;
}
.content-wrapper{
  position: relative;
  height: 800px; /*for demo*/
  transform: translateY(50px);
}
.sticky{
  position: sticky;
  top:0;
}

.spacer {
  height: 200px;
}

<header>header</header>
<div class="content-wrapper">
<div class="spacer"></div>
  <div class="sticky">
  Hello, I am a sticky element
  <div>
<div>