From 5b7708fd10b93ae27834fb03aed9bd40116d41cf Mon Sep 17 00:00:00 2001 From: Dogfather Date: Wed, 23 Sep 2026 22:56:04 +0200 Subject: [PATCH] Die Kopfleiste bleibt stehen -- jetzt auf allen Seiten Filipe: "die leiste soll immer da fest stehen bleiben auch wenn man runterscrollt, sonnst muss man immer wieder hoch scrollen um zurueck zu koennen oder so." GEMESSEN, BEVOR ETWAS ANGEFASST WURDE -- und das war noetig, denn der Quelltext sagte das Gegenteil: entwicklung.html sticky klebt start.html sticky klebt aufgaben.html relative wandert weg chat.html relative wandert weg wissen.html relative wandert weg Dieselbe Leiste, dasselbe CSS, zwei Verhalten. Der Unterschied war eine Regel, die es gar nicht darauf angelegt hatte: body[data-ton] .kopfleiste { position: relative; } Sie stand dort einzig, damit ein ::before darunter einen Bezugspunkt bekommt -- die farbige Kante der Seite. Ihre Staerke ist (0,2,1), genau wie die der Regel, die das Kleben setzt, und sie steht 8400 Zeilen spaeter. Bei gleicher Staerke gewinnt die spaetere. WARUM MAN DAS IM QUELLTEXT NICHT SIEHT: "data-ton" haengt kopf.js erst NACH dem Laden an den Body. Im HTML steht es nirgends. Welche Seite betroffen ist, entscheidet sich also im Browser -- und nur dort war es zu messen. ERSATZLOS WEG, nicht ersetzt: "position: sticky" ist selbst ein Bezugspunkt fuer absolut positionierte Kinder. Das ::before braucht die Zeile nicht. pruef-kopfleiste-farbe bestaetigt das: 9 geprueft, 0 Fehler, die Kante traegt weiter die Farbe der Seite. Dazu gilt die Regel jetzt fuer jedes Haus statt nur fuer "body.start" -- anruf-probe.html traegt "body.haus" und war nie erfasst. UND DAS SPRUNGZIEL. Wer von "Eure Aufgaben" auf eine Aufgabe tippt, landet auf aufgaben.html#a123. Mit einer festklebenden Leiste liegt das Ziel danach exakt darunter -- die Seite springt, und die gesuchte Karte ist trotzdem nicht zu sehen. Das sieht aus wie ein kaputter Link. "scroll-padding-top" haelt jetzt Abstand, und zwar aus der gemessenen Hoehe (--kopf-hoehe, die kopf.js ohnehin fuehrt und in der auch das Band der fremden Sicht steckt) -- keine feste Zahl: Am Rechner sind es 118 px, auf einem 390er-Schirm 115. DAS WAR DIE FUENFTE SPIELART DERSELBEN FALLE. Die vier anderen stehen seit dem 07.09. im Kommentar daneben; jedes Mal hat eine Regel "position" gesetzt, um etwas ganz anderes zu erreichen. Damit es keine sechste gibt, misst pruef-kopf-messen ab jetzt das VERHALTEN: Sie scrollt und sieht nach, wo die Leiste danach steht. Auf sechs Seiten statt drei -- die drei neuen sind die, auf denen es gebrochen war, plus eine ohne Farbton als Gegenprobe. Seiten, die zu kurz zum Scrollen sind, melden "nicht nachsehbar" statt stillschweigend gruen zu werden. Gemessen: pruef-kopf-messen 42 Breiten (davon 14 Klebe-Messungen), 0 beanstandet. pruef-kopfleiste-farbe 9, pruef-ueberlappung 20 Seiten-Breiten-Paare, alle ohne Befund. Sprungziel auf Rechner und Handy: 6 Messungen, 0 Befunde. Co-Authored-By: Claude Opus 5 --- server/pruef-kopf-messen.mjs | 65 ++++++++++++++++++++++++++++++++- workspace/anruf-probe.html | 10 ++--- workspace/app.webmanifest | 8 ++-- workspace/assets/css/gate.css | 21 +++++++++++ workspace/assets/css/start.css | 37 +++++++++++++++++-- workspace/aufgaben.html | 38 +++++++++---------- workspace/automation.html | 32 ++++++++-------- workspace/befinden.html | 32 ++++++++-------- workspace/bereich.html | 44 +++++++++++----------- workspace/bewerben.html | 36 +++++++++--------- workspace/bewerbungen.html | 34 ++++++++--------- workspace/calls.html | 34 ++++++++--------- workspace/chat.html | 38 +++++++++---------- workspace/content.html | 34 ++++++++--------- workspace/crew-index.html | 12 +++--- workspace/crew.webmanifest | 8 ++-- workspace/dateien.html | 34 ++++++++--------- workspace/entwicklung.html | 34 ++++++++--------- workspace/hilfe.html | 28 +++++++------- workspace/index.html | 10 ++--- workspace/kalender.html | 34 ++++++++--------- workspace/leistung.html | 32 ++++++++-------- workspace/material.html | 32 ++++++++-------- workspace/personen.html | 32 ++++++++-------- workspace/profil.html | 36 +++++++++--------- workspace/rechte.html | 32 ++++++++-------- workspace/report.html | 36 +++++++++--------- workspace/scouting.html | 32 ++++++++-------- workspace/start.html | 32 ++++++++-------- workspace/startcheck.html | 34 ++++++++--------- workspace/steckbrief.html | 36 +++++++++--------- workspace/talente.html | 34 ++++++++--------- workspace/team.html | 32 ++++++++-------- workspace/teamlage.html | 32 ++++++++-------- workspace/teilen.html | 28 +++++++------- workspace/treff-moderation.html | 30 +++++++-------- workspace/treff-regeln.html | 30 +++++++-------- workspace/uebersicht.html | 32 ++++++++-------- workspace/unsere-seiten.html | 28 +++++++------- workspace/werdegang.html | 30 +++++++-------- workspace/willkommen.html | 30 +++++++-------- workspace/wissen.html | 34 ++++++++--------- 42 files changed, 705 insertions(+), 592 deletions(-) diff --git a/server/pruef-kopf-messen.mjs b/server/pruef-kopf-messen.mjs index f37551e7..b10fe4e3 100644 --- a/server/pruef-kopf-messen.mjs +++ b/server/pruef-kopf-messen.mjs @@ -129,7 +129,17 @@ async function leisteFertig(seite, frist = 9000) { Kontrollseite von frueher PLUS die zwei, die zusaetzliche Gestaltungsdateien laden -- dort entstehen Konflikte, nirgends sonst. */ -const SEITEN = ["uebersicht.html", "teilen.html", "bewerben.html"]; +/* DREI KAMEN AM 23.09.2026 DAZU. Auf ihnen wanderte die Kopfleiste + beim Scrollen aus dem Bild, auf den drei darueber nicht -- der + Unterschied war ein Farbton, den kopf.js erst nach dem Laden setzt. + Wer nur die alten drei misst, sieht so etwas nie. + + aufgaben.html und wissen.html tragen einen Ton, chat.html ebenso; + entwicklung.html steht als Gegenprobe dabei (kein Ton) -- sonst + hiesse "alle kleben" nur, dass die Regel fuer den einen Fall + stimmt. */ +const SEITEN = ["uebersicht.html", "teilen.html", "bewerben.html", + "aufgaben.html", "wissen.html", "entwicklung.html"]; /* UND EINE BREITE ANSICHT (17.09.2026). @@ -191,6 +201,59 @@ for (const breite of [320, 390, 430, 1366]) { ausreisser: teile.filter((x) => x.hoehe > schnitt * 1.6), }; }); + /* ---- BLEIBT SIE BEIM SCROLLEN STEHEN? ------------------------------- + + Filipe, 23.09.2026: "die leiste soll immer da fest stehen bleiben + auch wenn man runterscrollt, sonnst muss man immer wieder hoch + scrollen um zurueck zu koennen oder so." + + Sie stand damals auf der Haelfte der Seiten -- und auf der anderen + nicht. Im Quelltext war das nicht zu sehen: Beide Seiten laden + dasselbe CSS, und die Regel, die es kaputt machte, greift erst, + wenn kopf.js ein "data-ton" an den Body haengt. Der Unterschied + entsteht also nach dem Laden. + + GEMESSEN WIRD DAS VERHALTEN, NICHT DIE EIGENSCHAFT. "position ist + sticky" waere die leichtere Frage und die falsche: Eine klebende + Leiste in einem Kasten, der selbst scrollt, hat auch position + sticky -- und wandert trotzdem weg. Gefragt wird deshalb, wo die + Leiste NACH dem Scrollen steht. + + Und nur dort, wo ueberhaupt gescrollt werden KANN: Auf einer + kurzen Seite bewegt sich nichts, und "sie ist noch oben" waere + dann kein Beweis, sondern eine Selbstverstaendlichkeit. Das ist + der dritte Ausgang -- nicht gut, nicht schlecht, sondern nicht + nachsehbar. */ + const kleben = await seite.evaluate(async () => { + const k = document.querySelector(".kopfleiste"); + if (!k) return { fehlt: true }; + const hoch = document.documentElement.scrollHeight - window.innerHeight; + if (hoch < 120) return { zuKurz: true, hoch }; + window.scrollTo(0, Math.min(600, hoch)); + await new Promise((r) => setTimeout(r, 250)); + const y = Math.round(k.getBoundingClientRect().top); + const gescrollt = Math.round(window.scrollY); + window.scrollTo(0, 0); + await new Promise((r) => setTimeout(r, 150)); + return { y, gescrollt, position: getComputedStyle(k).position }; + }); + if (kleben.fehlt) { + geprueft++; fehler++; + console.log(" FEHL " + breite + "px " + wo + ": gar keine Kopfleiste"); + } else if (kleben.zuKurz) { + console.log(" -- " + breite + "px " + wo + ": Seite zu kurz zum Scrollen (" + + kleben.hoch + "px) -- nicht nachsehbar"); + } else { + geprueft++; + /* Zwei Bildpunkte Spielraum: Unterpixel-Rundung beim Zoomen. */ + const bleibt = kleben.y >= -2 && kleben.y <= 2; + if (!bleibt) fehler++; + console.log(" " + (bleibt ? "ok " : "FEHL") + " " + breite + "px " + wo + + ": nach " + kleben.gescrollt + "px Scrollen steht die Leiste bei y=" + + kleben.y + " (position: " + kleben.position + ")" + + (bleibt ? "" : " -- sie wandert mit")); + } + geprueft++; if (reihe.ausreisser.length) { fehler++; diff --git a/workspace/anruf-probe.html b/workspace/anruf-probe.html index 27c53e74..5dbf4253 100644 --- a/workspace/anruf-probe.html +++ b/workspace/anruf-probe.html @@ -16,15 +16,15 @@ verdeckt. Gefunden hat es pruef-struktur. Richtig sind `gate.css` (die Farbwerte des Hauses) und `haus.css`. --> - - + + - +