nicht angemeldet
Rolf BHallo ReinerG,
ja, das ist das Grundsatzproblem von position:fixed, weshalb ich es nicht verwende, wenn ich auf der Seite einen Anker anspringen können möchte.
Eine „Billiglösung“ besteht darin, den Anker nicht auf die Überschrift zu setzen, sondern auf ein span-Element im Anker. Dieses Span-Element macht man visuell unauffällig und verschiebt es geeignet nach oben:
<h2><span class="anchor" id="artikel1"></span>Dies ist die Überschrift</h2>
span.anchor {
transform: translate(0,-5em);
}
Aber das ist nicht zu empfehlen.
- Du musst dieses Pattern in jeder Überschrift einbauen
- Du musst die Höhe der Überschrift JavaScript ermitteln und das Body-Padding sowie den Transform darauf anpassen. Die Annahme, dass Du die Höhe der Überschrift kennst, ist ein Irrtum.
Meine Lösung sieht so aus, dass ich die Seite so gestalte, dass der Body 100% Viewporthöhe hat (ggf. korrigiert um Margins). Der fixierte Teil steht oben, der scrollbare Teil befindet sich in einem Scrollcontainer darunter, der den Rest des Viewports ausfüllt. Der Scrollbar gilt dann nur für den Inhaltsteil und der Header bleibt stehen.
Das kann man mit Rechnerei umsetzen, mit Flexbox oder mit Grid. Nimm Grid…
<body>
<header>
<div class="logo">...</div>
<nav>
<input type="radio"...> <!-- Radiobuttonhack = Sanierungsalarm! -->
<ul>...</ul>
</nav>
</header>
<button id="myBtn">Go to top</button>
<main>
</main>
<div>lightbox-geraffel</div>
</body>
body {
margin: 8px; /* Browserunterschiede ausschließen */
height: calc(100vh - 16px); /* Body+Margins = 100% Viewporthöhe */
display: grid;
grid: "logo nav" auto
"main main " 1fr
/ auto 1fr;
gap: 0.5em; /* Beispielsweise */
}
header {
display: contents; /* Die Kindelemente des Headers sind Grid-Items */
}
div.logo {
grid-area: logo;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
overflow: scroll;
}
button#myBtn { /* Dieser Button möchte eine klarere ID haben! */
grid-area: main;
place-self: bottom right;
}
Der header hat display:contents, damit er im Layout durch seine Kinder ersetzt wird, also Logo und Navigation. Diese werden mit grid-area in die Grid-Zellen logo und nav gesetzt und stehen damit nebeneinander. Durch die Spaltenangaben "auto 1fr" (hinter dem Schrägstrich) wird die Logospalte so breit wie nötig und für nav ist der Rest verfügbar.
Das main-Element füllt den unteren Teil in ganzer Breite. Der Button wird ebenfalls in den unteren Teil gesetzt, aber über place-self positioniert er sich in die untere rechte Ecke dieses Bereichs.
Infos zum Grid-Layout findest Du im Selfhtml-Wiki.
Den Radiobutton-Hack für das Menü im "Schmal" Modus solltest Du entfernen, das ist unzeitgemäß und nicht zugänglich. Ich habe das Thema mit Jürgen im Thread "Popover" diskutiert, schau mal dort. Das Wiki hat auch was zu Popover, aber die anchor-Diskussion ist dort noch zurückgestellt und ist bisher auch nur in Chromium-Browsern gegeben. Ob der Polyfill überall funktioniert, kann ich nicht sagen.
Rolf
sumpsi - posui - obstruxi
Matthias Scharwies
JürgenB
Der Martin
Gunnar Bittersmann
Ryuno-Ki