<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="slide slide1" data-background="rgba(22, 160, 133,1.0)">
<h1>Change Page Background on Scroll</h1>
<p>You should see me in Green Sea.</p>
</div>
<div class="slide slide2" data-background="rgba(211, 84, 0,1.0)">
<h1>You just scrolled down to Slide 2</h1>
<p>I have filled your screen with Pumpkin Organge.</p>
</div>
<div class="slide slide3" data-background="rgba(41, 128, 185,1.0)">
<h1>You are awsome :)</h1>
<p>You are looking at the great Sky.</p>
</div>
<div class="slide slide4" data-background="rgba(192, 57, 43,1.0)">
<h1>That is all folks ....!</h1>
<p>This marks the End of this amazing color show.</p>
</div>
.slide{
border-bottom: 2px solid rgba(0,0,0,1);
color:#fff;
}
.slide1{
height: 500px;
}
.slide2{
height: 700px;
}
.slide3{
height: 900px;
}
.slide4{
height: 4000px;
}
$(document).ready(function(){
var wHeight = $(window).innerHeight();
var siblings = $('.slide').siblings();
var perset = {};
var sumHeight = 0;
for(var i = 0; i<siblings.length; i++) {
if(siblings[i].dataset.background){
perset[sumHeight] = siblings[i].dataset.background;
}
else
perset[sumHeight] = 0;
sumHeight= sumHeight + siblings[i].clientHeight;
}
processScroll();
function lessThan(nums, key){
if(nums == null || nums.length == 0 || key ==0 )
return 0;
low = 0;
high = nums.length -1;
while(low <= high){
mid = parseInt((low + high) >> 1);
if(key <= nums[mid]){
high = mid - 1;
}else {
low = mid +1;
}
}
return high;
}
var scroll_pos = 0;
function processScroll() {
scroll_pos = $(this).scrollTop();
var presetHeights = Object.keys(perset);
var x = lessThan(presetHeights,scroll_pos);
var bgColor = perset[presetHeights[x]];
if(bgColor) {
$("body").css('background-color',bgColor);
}
}
$(document).scroll(processScroll);
});
