position sticky und Text-fade out beim Scrollen
bearbeitet von Rolf BHallo grmblfx,
> Das Problem ist, dass ich dazu eine absolute Höhe angeben muss
Nein. Brauchst Du nicht. Du brauchst auch kein Pseudo-Element.
~~~html
<header>
<p>Dr. Arbeit.de</p>
<nav><ul><li>Suchen</li><li>Anbieten</li><li>Links</li></ul></nav>
</header>
<h1>Wie man eine Doktorarbeit schreibt</h1>
~~~
~~~css
body {
--fade-height: 1.5em;
}
header {
text-align: center;
position: sticky;
top: 0;
padding-bottom: var(--fade-height);
margin-bottom: calc(0 - var(--fade-height));
background-image: linear-gradient(to top, transparent, white var(--fade-height));
pointer-events: none;
border-bottom: 1px solid red; /* Nur zur Visualisierung der Grenze */
}
h1 {
margin-top: var(--fade-height);
}
~~~
Durch Verändern des Wertes des custom-property `--fade-height` kannst Du bestimmen, wie hoch der Ausblendebereich ist. Er sollte nicht höher sein als der margin-top der Textüberschrift, am besten gleich hoch, sonst blendest Du die schon in "Normalstellung" weg. Das Custom Property sorgt dafür, dass die Höhe des Ausblendebereichs nicht an drei Stellen als magic number auftaucht. Der IE kann das nicht, aber der kann auch kein position:sticky. So what.
Ich habe <nav> in den <header> gesteckt, damit sie gemeinsam sticky sind. Die bottom-border soll nur die Grenze des Fading-Bereichs visualisieren. Ich setze unten ein Padding, um Platz für den Ausblendebereich zu schaffen, und einen gleichgroßen negativen Margin, damit die folgenden Elemente an dieser Stelle den Header überlappen können. Dadurch brauche ich kein Pseudoelement. Die --fade-height habe ich der h1 Überschrift als margin-top gegeben, damit der Textinhalt der Überschrift genau an den Fade-Bereich angrenzt.
Schließlich noch der Einwand mit Buttons und Links von djr. Dagegen hilft `pointer-events: none;`.
_Rolf_
--
sumpsi - posui - obstruxi
position sticky und Text-fade out beim Scrollen
bearbeitet von Rolf BHallo grmblfx,
> Das Problem ist, dass ich dazu eine absolute Höhe angeben muss
Nein. Brauchst Du nicht. Du brauchst auch kein Pseudo-Element.
~~~html
<header>
<p>Dr. Arbeit.de</p>
<nav><ul><li>Suchen</li><li>Anbieten</li><li>Links</li></ul></nav>
</header>
<h1>Wie man eine Doktorarbeit schreibt</h1>
~~~
~~~css
body {
--fade-height: 1.5em;
}
header {
text-align: center;
position: sticky;
top: 0;
padding-bottom: var(--fade-height);
margin-bottom: calc(0 - var(--fade-height));
background-image: linear-gradient(to top, transparent, white var(--fade-height)));
pointer-events: none;
border-bottom: 1px solid red; /* Nur zur Visualisierung der Grenze */
}
h1 {
margin-top: var(--fade-height);
}
~~~
Durch Verändern des Wertes des custom-property `--fade-height` kannst Du bestimmen, wie hoch der Ausblendebereich ist. Er sollte nicht höher sein als der margin-top der Textüberschrift, am besten gleich hoch, sonst blendest Du die schon in "Normalstellung" weg. Das Custom Property sorgt dafür, dass die Höhe des Ausblendebereichs nicht an drei Stellen als magic number auftaucht. Der IE kann das nicht, aber der kann auch kein position:sticky. So what.
Ich habe <nav> in den <header> gesteckt, damit sie gemeinsam sticky sind. Die bottom-border soll nur die Grenze des Fading-Bereichs visualisieren. Ich setze unten ein Padding, um Platz für den Ausblendebereich zu schaffen, und einen gleichgroßen negativen Margin, damit die folgenden Elemente an dieser Stelle den Header überlappen können. Dadurch brauche ich kein Pseudoelement. Die --fade-height habe ich der h1 Überschrift als margin-top gegeben, damit der Textinhalt der Überschrift genau an den Fade-Bereich angrenzt.
Schließlich noch der Einwand mit Buttons und Links von djr. Dagegen hilft `pointer-events: none;`.
_Rolf_
--
sumpsi - posui - obstruxi