Annons:
Etikettformgivning-design
Läst 664 ggr
Anna
2015-04-18 17:53

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

annaattlid.se

Annons:
yeahsica
2015-04-18 21:36
#1

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).

yeahsica
2015-04-18 23:19
#2

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).

Anna
2015-04-19 09:42
#3

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

annaattlid.se

MichaelE
2015-04-21 13:18
#4

#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);

Upp till toppen
Annons: