Jensen: Sticky Header beim Scrollen Logo verkleinern

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

  1. @@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

    --
    Ad astra per aspera
    1. 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/

      1. @@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

        --
        Ad astra per aspera
  2. @@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

    --
    Ad astra per aspera
    1. @@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

      --
      Ad astra per aspera
    2. 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...

      1. @@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

        --
        Ad astra per aspera
        1. 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?

          1. @@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

            --
            Ad astra per aspera
            1. 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

        2. @@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:

          Titel „Where no one has gone before“ in Star-Trek-Schrift; Hintergrundbild: technische Zeichenung der USS Enterprise

          Kwakoni Yiquan

          --
          Ad astra per aspera