Artем,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
html{
width: 100%;
height: 3000px;
}
body{
position: relative;
overflow-x: hidden;
}
.first {
background: #FFCC00;
width: 100%;
height: 200px;
text-align: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto 0 ;
transition: all 1.2s ease-out ;
}
.right{
margin-left : 104%;
}
.left{
margin-left : -104%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).load(function() {
var min = 500,
max = 1500,
el = $(".first");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
scroll < min ? el.addClass("left") : el.removeClass("left");
scroll > max ? el.addClass("right") : el.removeClass("right")
})
}); </script>
</head>
<body>
<div class='first left'>
блок в середине страницы
</div>
</body>
</html>