ScrollTop

by Mostafa Zeinivand

HTML

<div id="main">
    <div id="goalDIV">
    </div>
    <input type='text' id='sts' />
</div>

CSS

#main{
    position:relative;
    height:1500px;
    width:100%;
    background:#e7e7e7;
}

#goalDIV{
    position:relative;
    top:450px;
    width:40%;
    height:150px;
    background:#CCC;
    margin:0 auto;
}
#sts{
    position:fixed;
    left:5px;
    bottom:5px;
}

JavaScript

$(document).ready(function(){
    $(window).scroll(function(){
        var top=$(window).scrollTop();
        $("#sts").val(top);
        if(top>=450)
            $("#main").css("background","#F00");
        else
            $("#main").css("background","#e7e7e7");
    })
})