Sticky Header beim Scrollen Logo verkleinern
Jensen
- css
- design/layout
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
@@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
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/
@@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
Jedoch möchte ich erreichen, dass auch das Logo darin sich mit verkleinert. Ist das überhaupt anhand des bestehenden Codes möglich?
☞ 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
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...
@@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
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?
@@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
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
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