Div mit fixed-parent soll aus parent rauscrollen

[Marc89]

Hi Leute Ich bin schon seit heute Morgen überall am suchen und werde nicht fündig, hab langsam dass Gefühl, dass es nicht wirklich möglich ist. Aber bevor ich aufgebe, möchte ich euch um eure Hilfe bitten =)

Ich habe einen <header>, der oben am Bildschirm fixiert ist. in diesem Header ist ein div (id divLogo), dass, im Gegensatz zum Rest des Headers, normal mit der Seite mitscrollen soll.

<header class="header">
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="_link_"><div id="divLogo"></div></a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
           <f:cObject typoscriptObjectPath="lib.nav" />
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <f:cObject typoscriptObjectPath="lib.intern_nav" />
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
  </header>

Hintergrund: es ist eine Homepage, die ein Freund in Typo3 mit bootstrap vor langem eingerichtet hat. Aktuell kommt er aber nicht dazu, mit zu helfen. Weil ich nicht die ganze Seite umbauen möchte/kann, suche ich eine Lösung, in der das div im Quellcode dort bleiben kann, wo es ist. Ich hoffe, ihr versteht, was ich meine.

Vielen Dank bereits im Voraus für eure Hilfe! Liebe Grüsse, Marc

[Gunnar Bittersmann]

@@Marc89

Ich habe einen <header>, der oben am Bildschirm fixiert ist. in diesem Header ist ein div (id divLogo)

Welches keinen Inhalt hat. Da gehört das Logo rein – als img oder als svg. https://forum.selfhtml.org/self/2017/jun/11/variable-div-hoehe/1696250#m1696250 ff.

Dein gesamter Beispielcode hat keinen Inhalt. Verlinke bitte die fragliche Seite oder erstelle ein funktionstüchtiges Beispiel. Bei CodePen kann man in den Einstellungen (Zahnrad) unter Quick-Links auch Bootstrap einbinden.

LLAP 🖖

[Marc89]

Lieber Gunnar

Vielen Dank für die schnelle Antwort. Das Bild wird via CSS als Background hinzugefügt.

Liebe Grüsse, Marc

[Gunnar Bittersmann]

@@Marc89

Vielen Dank für die schnelle Antwort. Das Bild wird via CSS als Background hinzugefügt.

Wie ich dir verlinkt hatte: das ist so nicht richtig.

LLAP 🖖

[Felix Riesterer]

Lieber Marc89,

Ich habe einen <header>, der oben am Bildschirm fixiert ist.

mit position:fixed?

in diesem Header ist ein div (id divLogo), dass, im Gegensatz zum Rest des Headers, normal mit der Seite mitscrollen soll.

Dann darf es kein Kind von <header> sein.

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer

in diesem Header ist ein div (id divLogo), dass, im Gegensatz zum Rest des Headers, normal mit der Seite mitscrollen soll.

Dann darf es kein Kind von <header> sein.

Doch, das darf es. Das sollte es auch sein. Das Logo gehört in den Seitenheader.

Andersrum wird ein Schuh draus: der Seitenheader darf nicht fixed positioniert sein.

Der Inhalt bestimmt das Markup; nicht die gerade gewünschte Darstellung.

LLAP 🖖

[Felix Riesterer]

Lieber Gunnar,

Du hast nicht geholfen.

Dann darf es kein Kind von <header> sein.

Doch, das darf es.

Im vorliegenden Fall führt diese Struktur nicht zur gewünschten Darstellung. Da der OP keine weiteren Angaben macht (keine Links zu aussagekräftigen Beispielen, wie Du korrekt bemängelt hast), ist eine weitergehende Vertiefung an dieser Stelle aus meiner Sicht nicht angebracht. Deshalb von mir nur der Hinweis, das der gewählte Weg nicht zum Erfolg führen wird. Wurde (wohl von Dir?) mit -1 bewertet.

Das sollte es auch sein. Das Logo gehört in den Seitenheader.

Du hast eine andere Diskussion begonnen: Semantisches Markup. Das war aber nicht der Ansatz des OP. Ihm ging es darum, wie er mit seinem gewählten technischen Ansatz (position:fixed) unter Beibehaltung seines Markups trotzdem eine bestimmte Darstellung erreichen könne. Also genau umgekehrt zu dem, auf das Du jetzt eingehen wirst.

Andersrum wird ein Schuh draus: der Seitenheader darf nicht fixed positioniert sein.

OK. Im Prinzip richtig, aber kannst Du auch helfen? Hast Du wenigstens einen Gegenvorschlag? So ein Codepen-Beispiel oder Dabblet, bei dem Du zeigst, wie mit dem vorhandenen und von Dir als richtig befundenen Markup die gewünschte Darstellung prinzipiell zu erreichen wäre? Wenigstens einen knappen Hinweis, wie man sich das aus CSS-Sicht vorstellen müsste?

Der Inhalt bestimmt das Markup; nicht die gerade gewünschte Darstellung.

Anstelle Deines Dogma hätte hier ein Code-Beispiel mit geeignetem CSS gut getan... aber anscheinend war Dir Dein Rechthaben wieder wichtiger.

Liebe Grüße,

Felix Riesterer.

[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

[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 ↩︎

[Marc89]

Lieber Gunnar

Danke für die ausführlichen Tipps!

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.

Ursprünglich wollte ich eigentlich, dass das Logo anfangs mitscrollt und dann oben fixiert wird. Dass Fixieren wollte ich immer mit JavaScript lösen, deshalb habe ich nur die Frage nach dem Mitscrollen gestellt.

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) }

Aktuell "springt" aber das Logo noch, anstatt mitzuscrollen, deshalb werde ich dass sicherlich noch ausprobieren.

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.

Stimmt, wird angepasst 😀

LG, Marc

[Marc89]

Ergänzung:

ich habe in CSS obige Klasse erstellt und vergebe sie nun wie folgt mit JavaScript: document.getElementById("divLogo").className = "user-scrolled"; So hast du es gemeint, oder? Das Logo "springt" natürlich immer noch, aber immerhin nun durch eine elegantere Variante 😉

[Matthias Apsel]

Hallo Marc89,

Das Logo "springt" natürlich immer noch, aber immerhin nun durch eine elegantere Variante 😉

Dafür gibt es transition.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Marc89

ich habe in CSS obige Klasse erstellt und vergebe sie nun wie folgt mit JavaScript: document.getElementById("divLogo").className = "user-scrolled"; So hast du es gemeint, oder?

Nicht ganz.

Ich meinte, body sollte die Klasse bekommen. Und damit etwaige bestehende Klassen nicht überschrieben werden classList.add() verwenden:

document.body.classList.add('user-scrolled');

Das Logo "springt" natürlich immer noch, aber immerhin nun durch eine elegantere Variante 😉

Und elegant geht ganz anders.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

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.

Und damit mangelnde CSS-Kenntnisse zur Schau gestellt. *kopfschüttel*

Was du willst, geht ohne JavaScript – in den meisten aktuellen Browsern, im Edge nach dem nächsten Update.

position: sticky ist das Zauberwort. ☞ Codepen

LLAP 🖖

[Marc89]

position: sticky ist das Zauberwort. ☞ Codepen

Darüber bin ich auch gestolpert, das Problem ist, wie du schon erwähnst, es geht nur in aktuellen Browsern. Wenn ich nachschaue, mit was für Browsern die Seite besucht wird, würde ich diese definitiv nicht mit "aktuell" umschreiben… Deshalb habe ich mich gegen "sticky" entschieden und für eine Cross-Browser-Variante reichen meine Kenntnisse nicht, respektive ist mir der Aufwand fürs Einlesen als ehrenamtlicher Bastler für die Homepage eines ehrenamtlichen Vereins nun doch zu gross.

[Gunnar Bittersmann]

@@Marc89

das Problem ist, wie du schon erwähnst, es geht nur in aktuellen Browsern.

Das Problem daran ist, dass manche Entwickler/Produktmanager das als Problem ansehen. Es ist keins. Oder do websites need to look exactly the same in every browser?

Wenn ich nachschaue, mit was für Browsern die Seite besucht wird, würde ich diese definitiv nicht mit "aktuell" umschreiben…

Meine Lösung ist so gebaut, dass sie auch in den Browsern funktioniert, die position: sticky noch nicht unterstützen. Dann ist eben dort das Ding am Anfang nicht voll zu sehen, sondern genauso wie es in allen Browsern nach dem Runterscrollen zu sehen ist. Geht dadurch irgendwas Entscheidendes verloren?

(Man könnte das natürlich auch so bauen, dass das Ding in den betreffenden Browsern voll zu sehen ist – auch nach dem Runterscrollen.)

Deshalb habe ich mich gegen "sticky" entschieden …, respektive ist mir der Aufwand … nun doch zu gross.

Wenn nichts Entscheidendes verloren geht (was bei dir wohl der Fall ist), dann: „Anstatt seine Zeit mit dem Versuch zu verbringen, Webseiten in den verschiedensten Browsern gleich aussehen zu lassen, kann man seine Zeit darin investieren sicherzustellen, dass die Kernfunktion dessen, was man baut, überall funktioniert, und gleichzeitig in fähigeren Browsern die bestmögliche Nutzungserfahrung zu bieten.“ (Jeremy Keith)

• Progressive enhancement – etwas mehr Übersetzung

• Responsive Enhancement – Jeremy Keith’ ganzer Artikel (auf Englisch)

LLAP 🖖

[Gunnar Bittersmann]

@@Felix Riesterer

Du hast nicht geholfen.

Glückwunsch für die Feststellung. Den Grund hast du ja auch gleich mitgeliefert:

Da der OP keine weiteren Angaben macht (keine Links zu aussagekräftigen Beispielen, wie Du korrekt bemängelt hast)

---

Du hast eine andere Diskussion begonnen: Semantisches Markup.

Das ist der Beginn jeder Diskussion einer Webseite. Siehe Orlando

Andersrum wird ein Schuh draus: der Seitenheader darf nicht fixed positioniert sein.

OK. Im Prinzip richtig, aber kannst Du auch helfen? Hast Du wenigstens einen Gegenvorschlag?

Liegt der nicht auf der Hand? Die Teile des Headers fix zu positionieren, die beim Scrollen stehenbleiben sollen?

So ein Codepen-Beispiel oder Dabblet, bei dem Du zeigst

Ich sehe Marc89 in der Pflicht, eins zu erstellen.

aber anscheinend war Dir Dein Rechthaben wieder wichtiger.

Und damit hast du dir einen weiteren Minuspunkt verdient.

LLAP 🖖

[Felix Riesterer]

Lieber Gunnar,

Hast Du wenigstens einen Gegenvorschlag?

Liegt der nicht auf der Hand? Die Teile des Headers fix zu positionieren, die beim Scrollen stehenbleiben sollen?

warum kommt das erst nach meiner Kritik und nicht schon in Deiner ersten Antwort? Das wäre Hilfe gewesen.

[Edit]Für den OP lag das überhaupt nicht auf der Hand; daher ja seine Frage! Und ich hätte mich mit dem Problem erst eingehender auseinandersetzen müssen, um selbst darauf zu kommen.[/Edit]

aber anscheinend war Dir Dein Rechthaben wieder wichtiger.

Und damit hast du dir einen weiteren Minuspunkt verdient.

Kind!

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer

warum kommt das erst nach meiner Kritik und nicht schon in Deiner ersten Antwort?

Weil ich erstmal die Problembeschreibung abwarten wollte.

Und siehe da: Kaum kommt eine Problembeschreibung, stellt sich das Problem völlig anders dar als ursprünglich vermutet.

LLAP 🖖

[Marc89]

Lieber Felix

Ich denke du hast meine Frage schon beantwortet. Nicht der Header hat position:fixed aber ein in ihm enthaltenes Div, dass dann auch das Div mit dem Logo enthält. Und eben, dass Logo ist Kind des fixierten Div, soll aber normal mit der Seite mitscrollen und nicht fixiert sein.

Dann muss ich wohl doch die Seite so umbauen, dass das Logo ausserhalb des fixierten Div ist. Danke für die Antwort!

Liebe Grüsse, Marc