В общем вся проблема в том что скрипт некорректно работает во время скролла
т.е во время скролла цвета блоков не меняются
а вся идея в том чтобы цвета плавно менялись во время скроллинга
http://learn.javascript.ru/play/EGRaKb
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="admin" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<title>Untitled - 1</title>
<style>
.active{
}
dbody {
min-height: 750px;
}
.body div{
display: block;
text-align: center;
border: 10px solid #000;
height: 250px;
width: 70%;
padding-top: 200px;
}
.menu{
position: fixed;
right: 20px;
top: 20px;
border: 2px solid #000;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#1">11111</a></li>
<li><a href="#2">22222</a></li>
<li><a href="#3">33333</a></li>
<li><a href="#4">44444</a></li>
<li><a href="#5">55555</a></li>
<li><a href="#6">66666</a></li>
</ul>
<div class="body">
<a name="1" ></a><br /><div id="f1">1</div>
<a name="2" ></a><br /><div id="f2">2</div>
<a name="3" ></a><br /><div id="f3">3</div>
<a name="4" ></a><br /><div id="f4">4</div>
<a name="5" ></a><br /><div id="f5">5</div>
<a name="6" ></a><br /><div id="f6">6</div>
</div>
<script>
$(document).ready(function(){
var link = window.location.hash.replace("#","");
$('.body a[name="'+link+'"]').next().next().addClass('active');
$('.menu a').click(function(){
var _name = $(this).attr("href");
document.location.href = _name;
location.reload();
});});
$(function() {
$(window).scroll(function(){
var distanceTop1 = $('#f1').offset().top - 450;
var distanceTop2 = $('#f2').offset().top - 450;
var distanceTop3 = $('#f3').offset().top - 450;
var distanceTop4 = $('#f4').offset().top - 450;
var distanceTop5 = $('#f5').offset().top - 450;
var distanceTop6 = $('#f6').offset().top - 450;
if ($(window).scrollTop() > distanceTop1){
$('#f2,#f3,#f4,#f5,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f1').animate({ backgroundColor: "green"}, 500);}
else
$('#f1').stop(true).animate({ backgroundColor: "none" }, 500);
if ($(window).scrollTop() > distanceTop2){
$('#f1,#f3,#f4,#f5,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f2').animate({ backgroundColor: "green"}, 500);}
else
$('#f2').stop(true).animate({ backgroundColor: "none" }, 500);
if ($(window).scrollTop() > distanceTop3){
$('#f2,#f1,#f4,#f5,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f3').animate({ backgroundColor: "green"}, 500);}
else
$('#f3').stop(true).animate({ backgroundColor: "none" }, 500);
if ($(window).scrollTop() > distanceTop4){
$('#f2,#f3,#f1,#f5,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f4').animate({ backgroundColor: "green"}, 500);}
else
$('#f4').stop(true).animate({ backgroundColor: "none" }, 500);
if ($(window).scrollTop() > distanceTop5){
$('#f2,#f3,#f4,#f1,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f5').animate({ backgroundColor: "green"}, 500);}
else
$('#f5').stop(true).animate({ backgroundColor: "none" }, 500);
if ($(window).scrollTop() > distanceTop6) {
$('#f2,#f3,#f4,#f5,#f1').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f6').animate({ backgroundColor: "green"}, 500);
}
else
$('#f6').stop(true).animate({ backgroundColor: "none" }, 500);
});
});
</script>
</body>
</html>
ПОМОГИТЕ!!!
