Div mit fixed-parent soll aus parent rauscrollen

[Gunnar Bittersmann]

@@Marc89

Habs jetzt mit Javascript gelöst. Ist sicher nicht die eleganteste Lösung und mir ist klar, dass es auf Kosten der Runtime geht, aber war für mich als Hobbybastler definitiv weniger aufwendig, als die Seite "komplett" umzubauen.

Sorry, dass ich nicht von Anfang den Link zur Verfügung gestellt habe, dann wäre es wohl für euch klarer gewesen^^

Hier der Link zu der (sich noch im Aufbau befindenden) HP: new.cevimoenchi.ch

Hättest du gleich gesagt, dass du das Logo nach beim Runterscrollen verkleinern/verschieben willst (und nicht, dass es „normal mit der Seite mitscrollen soll“), hätte man dir gleich sagen können: JavaScript.

Wobei es eleganter wäre, nicht direkt CSS-Eigenschaften per JavaScript zu ändern, sondern das DOM zu verändern.

Beim Scrollen also bspw. eine Klasse "user-scrolled" zu vergeben – diese gehört dann wohl ans body-Element. Die sich ändernde Darstellung kommt ins Stylesheet:

.user-scrolled #divLogo { top: -90px }

Allerdings ist die Verschiebung aus Performanzgründen besser mit translateY() gemacht. Spätestens, wenn du eine Transition einbaust (was sich hier anbietet), solltest du das eher so umsetzen:

.user-scrolled #divLogo { transform: translateY(-90px) }

---

Anmerkung zum Logo selbst:

<a class="navbar-brand" href="http://new.cevimoenchi.ch"><div id="divLogo"></div></a>

Da ist kein Inhalt. Nicht, wenn das Hintergrundbild nicht geladen wird. Nicht für Nutzer, die keine Bilder sehen können. Der Link zur Startseite ist nicht bedienbar.

Für Nutzer assistiver Technologien könnte man mit aria-label nachhelfen; besser ist aber, es richtig zu machen. Wie ich schon sagte: img-Element – mit alt-Text.

---

Anmerkung zur Navigation:

Auch die ist nicht bedienbar. Bei Tastaturbedienung geht bei der Auswahl von „Über uns“ kein Pull-down-Menü auf, sondern man landet direkt auf http://new.cevimoenchi.ch/ueber-uns/. Von dort kommt man nicht weiter zu den Unterpunkten.

---

Anmerkung zum Hamburger-Icon:

Ich hatte mich schon gefragt, wozu die vier leeren <span class="icon-bar"></span> gut sein sollen. Man kann auch mit span-Elemente auf den Bildschirm malen; ist dann aber eher Kacke. Verwende eine Grafik, vorzugsweise SVG.

Das Hamburger-Icon wird von vielen Nutzern^[1] nicht verstanden. Da sollte noch eine Beschriftung „Menü“ mit ran.

LLAP 🖖

---

1. je nach Zielgruppe mehr oder weniger ↩︎