如何防止粘性元素进入标题后面？
当前代码片段在父级上使用填充顶部，我也尝试在额外的子级上使用 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>
不确定这是否有我不知道的缺点，或者它在您的情况下是否可行，但
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; }