Sticky Header beim Scrollen Logo verkleinern

[Jensen]

Hallo, bin neu im Forum und habe sofort eine Frage ;-)

Ich habe ein Codeschnipsel, mit dem ich einen Sticky-Header für mein Logo + Menü erstellt habe, das beim Scrollen in der Höhe kleiner wird. Es funktioniert gut.

Jedoch möchte ich erreichen, dass auch das Logo darin sich mit verkleinert. Ist das überhaupt anhand des bestehenden Codes möglich?

:root {
  --logo-oben-tagline-height: 120px;
  --logo-oben-tagline-inside-height: 80px;
  --header-height-difference: calc(
    var(--logo-oben-tagline-height) - var(--logo-oben-tagline-inside-height)
  );
  --logo-oben-tagline-bg: #fff;
}
#logo-oben-tagline {height: var(--logo-oben-tagline-height);
  position: sticky;
  top: calc(
    var(--header-height-difference) * -1
  ); /* Multiply by -1 to get a negative value */
  display: flex;
  align-items: center;

  /* Other */
  background-color: var(--logo-oben-tagline-bg);
  box-shadow: 0 2px 10px 0 rgba(0,0,0, 0.1);
   z-index: 999 !important;
  }

#logo-oben-tagline .inside {
   	width:1200px;
    max-width:1200px;
    margin-right:auto;
    margin-left:auto;
    text-align:center;

    height: var(--logo-oben-tagline-inside-height);
  position: sticky;
  top: 0;

  /* Other */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#logo-oben-tagline img {
  display: block;
  height: calc(var(--logo-oben-tagline-inside-height) - 20px);

}

Über jede Hilfe / Ansatz wäre ich dankbar.

Viele Grüße Jensen

[Gunnar Bittersmann]

@@Jensen

Ich habe ein Codeschnipsel

Und wo kann man sich dessen Resultat ansehen? (Ohne Copy-and-paste-Orgie, die du nicht jedem hier zumuten willst?)

Kwakoni Yiquan

[Jensen]

Habe es bisher nur hier auf meinem Rechner.

Das gesamte Beispiel habe ich hier her: https://css-tricks.com/how-to-create-a-shrinking-header-on-scroll-without-javascript/

[Gunnar Bittersmann]

@@Jensen

Habe es bisher nur hier auf meinem Rechner.

Möchtest du da einen Webserver drauf laufen lassen und ihn öffentlich zugänglich machen? Oder doch lieber ein Online-Beispiel erstellen – auf deinem Webspace oder auf Plattformen wie CodePen oder Dabblet?

Kwakoni Yiquan

[Gunnar Bittersmann]

@@Jensen

Jedoch möchte ich erreichen, dass auch das Logo darin sich mit verkleinert. Ist das überhaupt anhand des bestehenden Codes möglich?

Ja. CSS scroll-driven animations

Kwakoni Yiquan

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Jedoch möchte ich erreichen, dass auch das Logo darin sich mit verkleinert. Ist das überhaupt anhand des bestehenden Codes möglich?

Ja. CSS scroll-driven animations

☞ scroll-driven shrinking header

(Wobei die Verkleinerung von dem Verhältnis des Runterscrollens zur Gesamthöhe abhängt, d.h. bei langen Seiten verkleinert sich der Header langsamer.)

Kwakoni Yiquan

[Jensen]

Habe es versucht und es hat tatsächlich im Edge und Chrome funktioniert. Leider läuft es im Firefox nicht, dazu ist ein Polyfill notwendig, das wiederum andere Fehler verursacht ( Font Awesome Icons werden z. B nicht dargestellt...

[Gunnar Bittersmann]

@@Jensen

Habe es versucht und es hat tatsächlich im Edge und Chrome funktioniert. Leider läuft es im Firefox nicht

Wie in Kommentaren in meinem Beispiel steht, läuft es bereits im Firefox mit gesetztem Feature-Flag. Laut Can I Use ist auch für die nächsten Releases noch nicht geplant, das allgemein freizuschalten.

dazu ist ein Polyfill notwendig

Nö. Notwendig ist die Verkleinerung des Headers nicht. Du kannst das getrost als progressive enhancement ansehen und nur in Browsern machen, die scroll-driven animinations unterstützen.

Oder du kuckst dir auf meinen Star-Trek-Seiten ab, wie ich die Linie unterm Header anzeigen/verschwinden lasse: per IntersectionObserver wird dem body eine Klasse "scrolled" verpasst bzw. weggenommen. Observiert wird dabei der head – wenn er schon mal da ist, braucht man kein zusätzliches Element.

Vorgestellt habe ich das u.a. auf der Jam Session der Smashing Conference Freiburg 2022, siehe insb. Slides 12 und 13.

---

Font Awesome Icons werden z. B nicht dargestellt...

Du verwendest die Icons aber hoffentlich nicht als Webfont, oder?

Kwakoni Yiquan

[Jensen]

Vielen Dank für die Infos. Habe mich mit Deinem Beispiel befasst... Leider bekomme ich beim Scrollen kein Event, so dass die Klasse sich nicht ändert. Ich habe für const headerElement = document.querySelector('#logo-oben-tagline'); meine ID eingesetzt. Liegt es vielleicht daran?

[Gunnar Bittersmann]

@@Jensen

Habe mich mit Deinem Beispiel befasst... Leider bekomme ich beim Scrollen kein Event, so dass die Klasse sich nicht ändert.

Hast du denn den head auch sichtbar gemacht? Und dessen Nachkommen unsichtbar, wie auf Slide 13 zu sehen?

Kwakoni Yiquan

[Jensen]

Super, daran hat es gelegen. Ich habe jetzt die "scroll-driven-animations" entfernt, da es ja nicht browserübergreifend funktioniert.

Ich habe mit dem Event der gesetzten Klasse nun einfach das Logo verkleinert.

Mit Deinem Beispiel ist es zwar scriptbasiert aber letztendlich auch schlank. Das kann ich so als Grundlage gut einsetzen.

Vielen Dank für die Zeit und super Hilfestellung (auch ohne Ansicht im Web).

Viele Grüße und einen schönen Sonntag. Jensen

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Vorgestellt habe ich das u.a. auf der Jam Session der Smashing Conference Freiburg 2022

Hatte mich spontan entschieden, das dort zu zeigen, und auf die Schnelle die Titelfolie gemacht (Abwandlung von einer vorigen Präsentation). Dafür muss ich mich bei Gelegenheit entschuldigen; es hätte so aussehen sollen:

Kwakoni Yiquan