Div mit fixed-parent soll aus parent rauscrollen
bearbeitet von 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](http://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](https://forum.selfhtml.org/cites/1711).
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:
~~~CSS
.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:
~~~CSS
.user-scrolled #divLogo { transform: translateY(-90px) }
~~~
---
## Anmerkung zum Logo selbst:
`<a class="navbar-brand" href="http://new.cevimoenchi.ch"><div id="divLogo"></div></a>`{: .language-html.bad}
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 man 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>`{: .language-html} 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.
[^1]: je nach Zielgruppe mehr oder weniger
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)