Problem mit position:sticky und div box
bearbeitet von Gunnar Bittersmann@@meggi09
> Allerdings sehe ich immer noch nicht, wo das Problem liegt, dass mein linker Navigationspart am ende der Seite doch mit nach oben verschwindet.
Den Übeltäter hab ich auch nicht erspäht; aber da noch so einiges verbesserungwürdig ist, hab ich das mal in einem [Paralleluniversum](https://codepen.io/gunnarbittersmann/pen/Orzrgy) nachgebaut.
> danke für die Hinweise, zu meinen Fehlern. Ich bin noch ein ziemlicher Anfänger, was vermutlich nicht zu übersehen ist, weshalb ich für jeden Hinweis dankbar bin. Ich werde auf jeden Fall versuchen, diese Fehler zu beheben.
Da wären die Überschriften: Du darfst `h1`, `h2`, `h3`, … nicht willkürlich vergeben, sondern schön der Reihe nach. Die Seitenüberschrift ist die `h1` – davon gibt es üblicherweise nur eine; das `h` steht hier für Highlander.
Die Seitenüberschrift ist in deinem Fall nicht „Das HARRY POTTER Universum“ (das wäre die Bezeichnung der Website), sondern „Die Charaktere“. (In meinem Beispiel ist es „Cast“, nicht „The Star Trek Universe“.)
„Die Hogwarts-Schüler“, „Die Hogwarts-Lehrer“ usw. sind `h2`. Aber bitte [nicht mit Deppenleerzeichen!](https://de.wikipedia.org/wiki/Leerzeichen_in_Komposita) Und die einzelnen Abschnitte dürfen gern als solche ausgezeichnet sein (`section`).
„Das Harry-Potter-Universum“ ist einfach Text (`p`) im `header`. Auch hier mit Bindestrichen durchgekoppelt, und die Großbuchstaben gehören nicht ins Markup – ein Screenreader würde sonst womöglich „Ha A Er Er Ypsilon Pe O Te Te E Er“ vorlesen. Wenn du da was hervorheben willst, dann so:
~~~HTML
<p>Das <em>Harry-Potter</em>-Universum</p>
~~~
Großbuchstaben sind Sache des Stylesheets:
~~~CSS
header em
{
font-style: inherit;
text-transform: uppercase;
}
~~~
Du zählst die Charaktere auf – auch das sollte sich im Markup wiederspiegeln. Statt `<div class="charakterbox1">` sollten das `li` in einer Liste `ul` sein.
`.charakterbox1 { height: 900px }`{:.language-css.bad} ist ganz übel! Nicht machen! Du kannst nicht wissen, ob der Inhalt bei allen Nutzern (wo evtl. andere Schriftarten und -größen verwendet werden) da reinpasst. Außerdem sollten Längen nicht in `px`{:.bad} angegeben werden, sondern im Verhältnis zur Schriftgröße (`em` bzw. `rem`) oder zur Größe anderer Elemente (`%`, `vw`, `vh`).
`.charakterbox1 { float: left }`{:.language-css.bad} – nein, auch das nicht! Floats sind kein geeignetes Mittel, um Elemente in ein Raster zu packen. Sie wurden in der Vergangenheit dazu missbraucht, als es noch nichts anderes gab. Die Zeiten sind glücklicherweise vorbei: es gibt CSS Grid – nicht nur das beste, sondern auch das einfachste Werkzeug für diesen Zweck.
Im meinem Beispiel ist es einfach:
~~~CSS
section ul
{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
gap: 1em;
}
~~~
Mache ein Raster mit so vielen Spalten wie Platz haben, wobei jede mindestens `12em` breit sein soll, und dazwischen jeweils `1em` Abstand – fertig.
Zur Nebeneinander-Positionierung der Seiten(abschnitt)navigation und der Charaktere habe ich allerdings `float` verwendet, weil das keine Geschwisterelemente sind und das mit Grid oder Flexbox ziemlich fricklig werden würde – wenn denn überhaupt möglich.
Das floatet aber nur bei genügend breitem Viewport (`@media (min-width: 30em)`{:.language-css}). Bei schmalem Viewport wird das untereinander dargestellt.
Nun zu dem `sticky`-Dingens. Bei mir ist das `main > header` (nicht irgendein `div`) – und das nur, wenn JavaScript ausgeführt wird und damit die Klasse `js-enabled` gesetzt ist.
Wenn ein seiteninterner Anker (`section`) angesprungen wird, landet der ja oben am Seitenanfang und wird durch den *sticky header*{:@en} verdeckt. Da wir dessen Höhe nicht kennen (Schriftart, -größe; s.o.), muss diese mit JavaScript ausgelesen werden und ermittelt werden, ob und um wieviel da noch zu scrollen ist. Das erledigt bei mir der Einzeiler
~~~JavaScript
const offset = window.scrollY - currentSectionElement.offsetTop + mainHeaderElement.offsetHeight;
~~~
der kaum in eine Zeile passt. Aber lieber sprechende Variablennamen als gar kein Schimmer, was das Script tut.
Und dann läuft das auch bis zum Seitenende durch. Bei mir ist da nichts, was den Header aus dem Viewport rausschiebt.
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann