менять css через js - это зло
в вашем случае надо в зависимости от условия добавлять или удалять класс у .header, а стили будут применяться уже в зависимости от класса
<style>
.nav a{
text-decoration: none;
display: block;
padding: 10px 30px;
color: #fff;
text-transform: uppercase;
}
.nav a:hover{
color: #af3030;
}
.header {
position: relative;
background: #3f415c;
height: 100px;
}
.nav {
margin-top: 30px;
}
.nav a {
color: #fff;
}
.left img {
width: 60px;
}
.header.fixed {
position: fixed;
top: 0;
background: #fff;
height: 80px;
}
.fixed .nav {
margin-top: 20px;
}
.fixed .nav a {
color: #000;
}
.fixed .nav a:hover {
color: #af3030;
}
.fixed .b1,
.fixed .b2 {
display: none;
}
.fixed .left img {
width: 40px;
}
</style>
<script>
$(function() {
$(window).scroll(windowScrollHandler)
})
function windowScrollHandler() {
if ($("body").scrollTop() > 80) {
$(".header").addClass("fixed")
} else {
$(".header").removeClass("fixed")
}
}
</script>