$(document).ready(function() {
var $header = $('header'),
$window = $(window),
bgArray = ["#252525", "#333333", "#454545", "#777777"],
headerHeight = $header.outerHeight();
$window.scroll(function() {
for (var i = 1; i < 5; i++) {
if ($window.scrollTop() + headerHeight > $('.block-' + i).offset().top) {
$header.css('background', bgArray[i - 1]);
}
}
});
});
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
body {
font-family: 'Roboto', sans-serif;
font-size: 30px;
font-weight: 300;
margin-top: 0;
}
header {
width: 100%;
height: 50px;
line-height: 50px;
position: fixed;
font-size: 24px;
font-weight: 700;
color: #FFF;
padding: 12px 0;
margin: 0;
background: #252525;
transition: background 1s ease;
}
.wrap {
padding-top: 74px;
margin: 0;
}
.container {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.block-1,
.block-2,
.block-3,
.block-4 {
height: 400px;
text-align: center;
}
p {
margin-top: 185px;
}
.block-1 {
background: #27AACC;
color: #FFF;
}
.block-2 {
background: #668E99;
color: #FFF;
}
.block-3 {
background: #4AFFC1;
color: #444;
}
.block-4 {
background: #FF8F8A;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="container">
Website Title.
</div>
</header>
<div class="wrap">
<div class="block-1">
<div class="container">
<p>This pen was made to solve a problem on a project...</p>
</div>
</div>
<div class="block-2">
<div class="container">
<p>...I needed a sticky header with thr right bg colour.</p>
</div>
</div>
<div class="block-3">
<div class="container">
<p>But this conflicted with the footer, which was the same colour...</p>
</div>
</div>
<div class="block-4">
<div class="container">
<p>So the solution was to subtley change the header's bg on scroll</p>
</div>
</div>
</div>
$( window ).on('scroll', $.throttle( 250, function(){ /* Code goes here */ }) );
- Martijn