求各位大大帮忙看看是什么原因！
本人最近需要弄一个关于页面滚动时的效果，但一直弄不明白
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<style>
body{margin:0 auto;padding:0;font-size:12px;font-family:"宋体";color:#000}
ul,li,dl,dt,dd,form,h1,h2,h3,h4,p,tr,td,th{margin:0px;padding:0px}
li {list-style-type:none}
img{border:0}
.clear{margin:0;padding:0;clear:both}
.clear hr{margin:0;padding:0;display:none}
a{color:#343331;text-decoration:none;outline:none}
a:hover{color:#df494b;text-decoration:none}
a:active{star:expression(this.onFocus=this.blur())}
:focus{outline:0}
.en{font-family:Arial,Helvetica,sans-serif;font-size:11px}
/*测试用*/
#text{position:fixed;top:100px;left:45%;color:#fff}
/*测试用*/
header{height:85px;overflow:hidden;position:fixed;background:#fff;width:100%;z-index:99999}
header .inner{width:1100px;overflow:hidden;height:85px;margin:0 auto}
section{width:100%;height:2000px}
.hgrap{height:85px}
.banner{height:660px;background:blue;width:100%}
.bannerbody{width:1100px;position:relative;height:660px;margin:auto;border-left:1px solid green}
.banner_font1{width:441px;height:69px;position:absolute;top:108px;left:0px;background:red}
</style>
</head>
<body>
<header>
<div class="inner">
</div>
</header>
<div id="text" style="width:50px;height:50px">1</div>
<section id="home">
<div class="hgrap"> </div>
<div class="banner">
<div class="bannerbody">
<div class="banner_font1" id="banner_font1"> </div>
</div>
</div>
</section>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script>
$(function(){
var $window = $(window);
var position = "top";
var banner_font1 = $("#banner_font1");
var banner_font1_left;
var posScroll = 0;
/************************************滚轮事件********************************************/
var ii = 0;
var initTop = 0;
$window.scroll(function() {
posScroll = $window.scrollTop();//获取当前滚动高度
position = scrollPosition(posScroll,initTop);//判断滚动条滚动方向（上与下）
initTop = posScroll;//记录滚动
banner_font1_left = getNum(banner_font1.css("left"));//记录font1 left位置
if(position == "down")
{
banner_font1.stop(false,true).css("left", banner_font1_left - 5 + "px" );
}
else
{
banner_font1.stop(false,true).css("left", banner_font1_left + 5 + "px" );
}
//测试用显示数字
$("#text").html(posScroll);
});
//$("#text").html(posScroll);
});
//滚动条方向（return top or down）
function scrollPosition(posScroll,initTop)
{
var flag = "top";
if(posScroll > initTop){
flag = "down";
}
else{
flag = "top";
}
return flag;
}
function getNum(str)
{
str = str.replace("px","");
return parseInt(str);
}
</script>
</body>
效果是当滚动条下移时，红色的方块向左边移动，当滚动条上移时红色的方块往初始的位置移动，（绿色线是红框的初始左边界）但现在不知道为什么，每次滚动条来回移动后，红框都不能返回原来的初始位置（绿色线的位置），求各位大大帮忙看看，谢谢，已经贴出代码，整个拷贝就能看到效果了. HTML
[解决办法]
$(function () {
var $window = $(window);
var position = "top";
var banner_font1 = $("#banner_font1");
var banner_font1_left = getNum(banner_font1.css("left"));
var posScroll = 0;
/************************************滚轮事件********************************************/
var ii = 0;
var initTop = 0;
$window.scroll(function () {
posScroll = $window.scrollTop(); //获取当前滚动高度
position = scrollPosition(posScroll, initTop); //判断滚动条滚动方向（上与下）
initTop = posScroll; //记录滚动
/**
banner_font1_left = getNum(banner_font1.css("left")); //记录font1 left位置
if (position == "down") {
banner_font1.stop(false, true).css("left", banner_font1_left - 5 + "px");
}
else {
banner_font1.stop(false, true).css("left", banner_font1_left + 5 + "px");
}*/
banner_font1.stop(false, true).css("left", banner_font1_left + posScroll + "px");
//测试用显示数字
$("#text").html(posScroll);
});
//$("#text").html(posScroll);
});
[解决办法]
试一试：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{margin:0 auto;padding:0;font-size:12px;font-family:"宋体";color:#000}
ul,li,dl,dt,dd,form,h1,h2,h3,h4,p,tr,td,th{margin:0px;padding:0px}
li {list-style-type:none}
img{border:0}
.clear{margin:0;padding:0;clear:both}
.clear hr{margin:0;padding:0;display:none}
a{color:#343331;text-decoration:none;outline:none}
a:hover{color:#df494b;text-decoration:none}
a:active{star:expression(this.onFocus=this.blur())}
:focus{outline:0}
.en{font-family:Arial,Helvetica,sans-serif;font-size:11px}
/*测试用*/
#text{position:fixed;top:100px;left:45%;color:#fff}
/*测试用*/
header{height:85px;overflow:hidden;position:fixed;background:#fff;width:100%;z-index:99999}
header .inner{width:1100px;overflow:hidden;height:85px;margin:0 auto}
section{width:100%;height:2000px}
.hgrap{height:85px}
.banner{height:660px;background:blue;width:100%}
.bannerbody{width:1100px;position:relative;height:660px;margin:auto;border-left:1px solid green}
.banner_font1{width:441px;height:69px;position:absolute;top:108px;left:0px;background:red}
</style>
</head>
<body>
<header>
<div class="inner">
</div>
</header>
<div id="text" style="width:50px;height:50px">1</div>
<section id="home">
<div class="hgrap"> </div>
<div class="banner">
<div class="bannerbody">
<div class="banner_font1" id="banner_font1"> </div>
</div>
</div>
</section>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script>
$(function(){
var $window = $(window);
var position = "top";
var banner_font1 = $("#banner_font1");
var banner_font1_left;
var posScroll = 0;
/************************************滚轮事件********************************************/
var ii = 0;
var initTop = 0;
$window.scroll(function() {
posScroll = $(this).scrollTop(); //获取当前滚动高度
position = scrollPosition(posScroll,initTop); //判断滚动条滚动方向（上与下）
initTop = parseInt(posScroll); //记录滚动
banner_font1_left = getNum(banner_font1.css("left")); //记录font1 left位置
if(position == "down"){
$("#banner_font1").css("left", -(posScroll - 5) + "px" );
}else{
$("#banner_font1").css("left", -(posScroll - 5)-5 + "px" );
}
//测试用显示数字
$("#text").html(posScroll);
});
//$("#text").html(posScroll);
});
//滚动条方向（return top or down）
function scrollPosition(posScroll,initTop)
{
var flag = "top";
if(posScroll > initTop){
flag = "down";
}
else{
flag = "top";
}
return flag;
}
function getNum(str)
{
str = str.replace("px","");
return parseInt(str);
}
</script>
</body>
</html>
