Fixed header opacitet vid scroll?
Jag bygger en webbsida där jag vill ha en header längst upp med position: fixed. När man sedan scrollar neråt vill jag att bakgrundsfärgen på headern ändrar opacitet, så att man ser lite av innehållet bakom. Hur löser jag snyggast detta med javascript/jquery?
Anna, värd på Hästfoto och Webbutveckling
Vet inte om det är den snyggaste lösningen men här kommer ett förslag i jQuery i alla fall :)
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('header').addClass('fixed');
$('header').css('opacity', '0.8');
$('body').css('padding-top', '60');
} else {
$('header').removeClass('fixed');
$('header').css('opacity', '1');
$('body').css('padding-top', '0');
}
});
Den börjar köras när besökaren scrollat ner 100 px. Opaciteten sätts då till 0.8. För att sidan inte ska "hoppa till", sätts padding-top på body till 60 px, vilket är höjden av header. I else-fallet sätts alla parametrar tillbaks till ursprungsläget.
Som koden är skriven behöver du göra en CSS-klass som heter .fixed också, där du anger position: fixed; top: 0; left: 0; (eller annat valfritt).
Satt och ändrade i koden medan jag skrev inlägget ovan och ser nu att det blev fel. Det ska vara '60px' för padding-top på body (alternativt 60 utan fnuttar).
Tack! 🙂
Jag insåg dock att jag inte behövde använda mig av Javascript alls, eftersom headern ligger på en vit bakgrund och alltså kan ha opacitet 0.95 direkt i CSSen utan problem. Funkar inte i IE, men då det bara är en estetisk grej så är det OK för min del i det här projektet. Såhär blev det förenklade slutresultatet:
header {
width: 100%;
background: rgba(236, 236, 236, 0.95);
position: fixed;
height: 50px;
margin: 0 auto;
padding: 30px 0 0 0;
top: 0;
left: 0;
z-index: 2;
}
Anna, värd på Hästfoto och Webbutveckling
#3 Det bör fungera från IE 9. Alla versioner innan dess stödjer inte CSS3. Då måste du köra med:
alpha(opacity=80);