Ich sehe vor lauter Bäumen den Wald nicht mehr

[Camping_RIDER]

Aloha ;)

ich würde gerne von dieser Seite den "shrinking fixed header" übernehmen.

Mir gelingt es zwar, nahezu den kompletten Rest heraus zu löschen. Was mir aber nicht gelingt, ist den wirklich relevanten Code, der den Header betrifft zu separieren. Ich schleppe also massig Balast (an js und css Dateien, bzw. Code) mit mir herum, den ich niemals wirklich brauchen werde, der aber relevanten Code nur noch schwer veränderbar macht, weil ich ihn nicht finde.

Wie kann ich es schaffen, nur die relevanten Dateien bzw. Codezeilen zu identifizieren?

Mit deinem Inspector (z.B. in Chrome - Rechtsklick - Untersuchen). Damit kannst du beobachten, was denn eigentlich beim Scrollen passiert. Du wirst dann feststellen, dass beim Scrollen (und das funktioniert tatsächlich über einen Javascript-Event-Handler ähnlich zu TS Vorschlag mit den von mir genannten gravierenden Nachteilen) dem Body eine Klasse fixed-header-on hinzugefügt (und bei wieder-hochscrollen entsprechend entfernt. Mit nativem JavaScript funktioniert das so (im Original wird ein JS-Framework verwendet):

function checkScroll() {   
  if(window.pageYOffset > 0 && !document.body.classList.contains("fixed-header-on")) {
    document.body.classList.add("fixed-header-on");                 
  } else if (window.pageYOffset == 0 && document.body.classList.contains("fixed-header-on")) {
    document.body.classList.remove("fixed-header-on");
  }
}

window.addEventListener("scroll",checkScroll);
window.addEventListener("load",checkScroll); // Falls mit Anker gesprungen wurde!

Das war der Teil, der den Header umschaltet. Wie das umschalten auf CSS-Basis funktioniert kannst du auch im Inspektor nachvollziehen. Such dafür im Inspektor den <header>. Bei dessen CSS-Regeln siehst du, wenn du heruntergescrollt hast

.header {
    color: #fff;
    background-color: rgba(0,0,0,0.10);
    padding: 10px 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.fixed-header-on .header {
    background-color: rgba(0,0,0,0.95);
    padding: 5px 0;
}

Dieser CSS-Code tut all das^[1], was die Animation hergibt. Die relevante Zeile für die Animation ist:

transition: all 0.2s ease-in-out;

Die transition-Angaben mit vendor-prefixes tun dasselbe und werden in aktuellen Browsern sowieso durch die Zeile ohne vendor-prefix überschrieben.

Wie du in unserem Wiki erfährst bedeutet diese Zeile:

1. transition: Lass CSS-Änderungen schrittweise anwenden
2. all: und zwar bei jeder sich ändernden Eigenschaft
3. 0.2s: mit einer Überblend-Dauer von 0.2s
4. ease-in-out: Übergangsmodus mit einem langsamen Start und Ende

Die sich verändernden CSS-Eigenschaften ergeben sich aus den CSS-Regeln für .fixed-header-on .header, die nur dann greifen, wenn im Window der Scroll-Balken nicht ganz oben liegt.

Auch wenn du jetzt nach dieser Erklärung hoffentlich verstanden hast, wie die vorliegende Seite das löst, wäre es trotzdem nicht schlecht, sich noch Gedanken darüber zu machen, wie man das vorliegende ohne Javascript lösen kann - z.B. durch geschickte Verschiebung des Body und fixierten, kleineren header wie in meinem Alternativvorschlag oder durch eine andere kreative Idee.

Grüße,

RIDER

---

1. all das ist ein wenig geflunkert. Die veränderte Schriftgröße beispielsweise wird so realisiert, indem das entsprechende Sub-Element auch über diese transition-Eigenschaft und den zweiten Satz CSS-Regeln verfügt, aber das Prinzip ist das selbe - und grade die Sache mit der Schriftgröße hätte man sehr viel besser über eine Basis-Schriftgrößenänderung im header direkt und relative Schriftgröße in den Unterelementen lösen können. Aber wie gesagt - selbes Prinzip, je Effekt der nur auf Sub-Elemente angewandt werden soll ein wenig mehr CSS. ↩︎