On Scroll Div Move

by Banzay

HTML

<div id="top-box"></div>
<div id="bottom-box"></div>

CSS

body {
 height:2000px;   
}

#top-box {
position:fixed;
 width:200px;
 height:200px;
 margin-left:100px;
 margin-top:50px;
 background-color:blue;   
 z-index:2;   
}

#bottom-box {
   position:fixed;
 width:200px;
 height:200px;
 margin-left:110px;
 margin-top:60px;
 background-color:red;  
 z-index:1;    
    
}

JavaScript

$(document).ready(function(){
    var away = false;
    
    $(document).scroll(function() {
        if ($(document).scrollTop() > 600) {
            if (!away) {
                away = true;
                $('#bottom-box').stop().animate({'margin-top': '200px'}, 1500);
            }
        } else {
            away = false;
            $('#bottom-box').stop().animate({'margin-top': '60px'}, 1500);
        }
    });
});