父級的填充被黏性定位的子級忽略

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