Ich sehe vor lauter Bäumen den Wald nicht mehr
bearbeitet von Camping_RIDERAloha ;)
> ich würde gerne von [dieser Seite](http://www.free-css.com/assets/files/free-css-templates/preview/page210/worthy-v1.0/) 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](https://forum.selfhtml.org/self/2017/mar/25/ich-sehe-vor-lauter-baeumen-den-wald-nicht-mehr/1690853#m1690853) mit den von mir genannten [gravierenden Nachteilen](https://forum.selfhtml.org/self/2017/mar/25/ich-sehe-vor-lauter-baeumen-den-wald-nicht-mehr/1690929#m1690929)) 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):
~~~js
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
~~~css
.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, was die Animation hergibt. Die relevante Zeile für die Animation ist:
~~~css
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](http://wiki.selfhtml.org/wiki/Transition) erfährst bedeutet diese Zeile:
1. `transition`{: .language-css}: Lass CSS-Änderungen schrittweise anwenden
2. `all`{: .language-css}: und zwar bei jeder sich ändernden Eigenschaft
3. `0.2s`{: .language-css}: mit einer Überblend-Dauer von 0.2s
4. `ease-in-out`{: .language-css}: Ü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`{: .language-css}, 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](https://forum.selfhtml.org/self/2017/mar/25/ich-sehe-vor-lauter-baeumen-den-wald-nicht-mehr/1690929#m1690929) oder durch eine andere kreative Idee.
Grüße,
RIDER
--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
# [Twitter](https://twitter.com/Camping_RIDER) # [Steam](http://steamcommunity.com/id/Camping_RIDER) # [YouTube](https://www.youtube.com/user/RidersFlame) # [Self-Wiki](http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER) #
[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
Ich sehe vor lauter Bäumen den Wald nicht mehr
bearbeitet von Camping_RIDERAloha ;)
> ich würde gerne von [dieser Seite](http://www.free-css.com/assets/files/free-css-templates/preview/page210/worthy-v1.0/) 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](https://forum.selfhtml.org/self/2017/mar/25/ich-sehe-vor-lauter-baeumen-den-wald-nicht-mehr/1690853#m1690853) mit den von mir genannten [gravierenden Nachteilen](https://forum.selfhtml.org/self/2017/mar/25/ich-sehe-vor-lauter-baeumen-den-wald-nicht-mehr/1690929#m1690929)) 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):
~~~js
function checkScroll() {
if(window.scrollY > 0 && !document.body.classList.contains("fixed-header-on")) {
document.body.classList.add("fixed-header-on");
} else if (window.scrollY == 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
~~~css
.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, was die Animation hergibt. Die relevante Zeile für die Animation ist:
~~~css
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](http://wiki.selfhtml.org/wiki/Transition) erfährst bedeutet diese Zeile:
1. `transition`{: .language-css}: Lass CSS-Änderungen schrittweise anwenden
2. `all`{: .language-css}: und zwar bei jeder sich ändernden Eigenschaft
3. `0.2s`{: .language-css}: mit einer Überblend-Dauer von 0.2s
4. `ease-in-out`{: .language-css}: Ü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`{: .language-css}, 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](https://forum.selfhtml.org/self/2017/mar/25/ich-sehe-vor-lauter-baeumen-den-wald-nicht-mehr/1690929#m1690929) oder durch eine andere kreative Idee.
Grüße,
RIDER
--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
# [Twitter](https://twitter.com/Camping_RIDER) # [Steam](http://steamcommunity.com/id/Camping_RIDER) # [YouTube](https://www.youtube.com/user/RidersFlame) # [Self-Wiki](http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER) #
[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[