Naja, eher so:
CSS:
Code:
/* so soll es am Anfang aussehen: */
.custom {
background-color:#fff;
}
.custom .logo_menu {
display:none;
}
/* und so, wenn die Seite gescrollt wurde: */
.custom.fixed-header {
background-color:#f9f9f9;
}
.custom.fixed-header .logo_menu {
display:block;
}
und
JS:
Code:
$(window).scroll(function(){
if ($('.mobile').length > 0) {
wert = 200;
} else {
wert = 270;
}
if ($(window).scrollTop() >= wert) {
$('.custom').addClass('fixed-header');
}
else {
$('.custom').removeClass('fixed-header');
}
});
Wenn es dann noch faden soll, bspw. sowas:
CSS:
Code:
.custom {
background-color:#fff;
-webkit-transition: background-color 800ms ease-out;
-moz-transition: background-color 800ms ease-out;
-o-transition: background-color 800ms ease-out;
transition: background-color 800ms ease-out;
}
Und wenn du statt nur CSS auch noch LESS verwendest (was einem Contao wirklich leicht macht, weil du die Kompilierung nicht selbst machen musst), musst du auch nicht jedesmal die browserspezifischen Anweisungen einzeln hinschreiben, sondern kannst das als Funktion schreiben:
LESS:
Code:
/* --- einmal die LESS-Funktion definieren: --- */
.fade(...) {
-webkit-transition: @arguments;
-moz-transition: @arguments;
-o-transition: @arguments;
-ms-transition: @arguments;
transition: @arguments;
}
/* --- und dann immer wieder verwenden: --- */
.custom {
background-color:#fff;
.fade(background-color 800ms ease-out);
}
.custom.fixed-header {
.fade(background-color 2s ease-out);
}
Wie du die Funktion nennst und welche Werte du veränderst, ist natürlich dein Ding – sind nur Beispiele von mir.
Lesezeichen