父级的填充被粘性定位的子级忽略

Question

如何防止粘性元素进入标题后面？

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

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

如何使标题/填充变得“实心”并使便签无法通过？

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


  

  Hello, I am a sticky element