# Fixed header opacitet vid scroll?
Author: 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?

## Comment 1
Author: 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).

## Comment 2
Author: 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).

## Comment 3
Author: Anna

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;

}

## Comment 4
Author: [Borttaget]

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