03. Front-end

Fixed header opacitet vid scroll?

2015-04-18 17:53 #0 av: Anna

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

Anmäl
2015-04-18 21:36 #1 av: yeahsica

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


Anmäl
2015-04-18 23:19 #2 av: yeahsica

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


Anmäl
2015-04-19 09:42 #3 av: Anna

Tack! Glad 

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

Anmäl
2015-04-21 13:18 #4 av: MichaelE

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

Anmäl

Bli medlem på iFokus

För att kunna delta i diskussionen måste du bli medlem på iFokus. Det går snabbt, enkelt, och kostar ingenting. Medlemskapet ger dig tillgång till över 300 sajter.