Wie kann verhindert werden, dass klebrige Elemente hinter den Header gelangen?
Das aktuelle Code-Snippet verwendet padding-top für das übergeordnete Element. Ich habe auch versucht, margin-top oder einen transparenten 50-Pixel-Rahmen für die zus?tzlichen untergeordneten Elemente zu verwenden, aber es scheint nicht zu funktionieren.
Ich wei?, in diesem Fall k?nnte ich es problemlos auf Sticky Tags verwenden top: 50px;, aber ich m?chte diesen Teil in eine React-Komponente integrieren und die Verwendung bestimmter Gr??en macht es schwieriger, verschiedene Komponenten zu kombinieren, da sie alle die gleiche Top-Gr??e haben müssen.
Wie mache ich den Titel/die Polsterung ?solide“ und mache es unm?glich, dass die Haftnotizen hindurchgehen?
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>
1
0
0
不確定這是否有我不知道的缺點(diǎn)，或者它在您的情況下是否可行，但 translateY 似乎有效。不過這絕對(duì)是很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
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
