求各位大大帮忙看看是什么原因！

本人最近需要弄一个关于页面滚动时的效果，但一直弄不明白<!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

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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">0</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 banner_font1 = $("#banner_font1");
var banner_font1_left;
/************************************滚轮事件********************************************/
var ii = 0;
var initTop = 0; document.onmousewheel=function(evt){
    evt=evt?evt:event;
   banner_font1_left = getNum(banner_font1.css("left")); //记录font1 left位置
   if(event.wheelDelta==120 && banner_font1_left<0){ //鼠标上滚动
   $("#banner_font1").stop(false,true).css("left", banner_font1_left + 50 + "px" );
}
if(event.wheelDelta==-120){
   $("#banner_font1").stop(false,true).css("left", banner_font1_left - 50 + "px" );
} //记
}
});
function getNum(str)
{
str = str.replace("px","");
return parseInt(str);
}
</script>
</body>
$(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>