Effect on Scroll

by Kushal Jayswal

HTML

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>

CSS

#one { float:left; width:100%; height:200px; background-color:#7ECEFD; }
#two { float:left; width:100%; height:200px; background-color:#FFF6E5; }
#three { float:left; width:100%; height:200px; background-color:#FF7F66; margin:-100px 0 0 0; }
#four { float:left; width:100%; height:1000px; background-color:#FFFFFF; }

JavaScript

$(window).scroll(function(){
    var fromTop = $(window).scrollTop();
    $("#three").css('margin', '-' + (100 - fromTop) + 'px 0px 0px 0px');
});