Problem mit position:sticky und div box

[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 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! 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:

<p>Das <em>Harry-Potter</em>-Universum</p> 

Großbuchstaben sind Sache des Stylesheets:

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 } 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 angegeben werden, sondern im Verhältnis zur Schriftgröße (em bzw. rem) oder zur Größe anderer Elemente (%, vw, vh).

.charakterbox1 { float: left } – 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:

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 query). 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 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

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 🖖