<!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">
<style type="text/css">
.obj{width:180px; height:300px; position:relative;}
.box{ width:160px; height:300px; border:1px solid #666666;}
.btn{ width:18px; height:60px; background:#F00; float:left; position:absolute; right:0; top:0; cursor:pointer;}
</style>
<body>
<div id="obj" class="obj">
<div class="box" id="box"></div>
<div class="btn" onclick="set()" id="btn">点<br />我</div>
</div>
<script>
var ig=document.getElementById("obj");
var box=document.getElementById("box");
var btn=document.getElementById("btn");
var w=box.offsetWidth;  //边框宽度
var isIE = (document.all) ? true : false;  
var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6); 
var Bind = function(object, fun) { 
    return function() {
        return fun.apply(object, arguments);
    }
}
ig.style.position ="fixed";
ig.style.zIndex='1000';
ig.style.left='0'+"px";
ig.style.top='100'+"px";
if(isIE6){
ig.style.position ="absolute";
ig._fixed = Bind(ig, function(){
ig.style.marginTop = document.documentElement.scrollTop  + "px";
ig.style.marginLeft = document.documentElement.scrollLeft + "px";});
ig._fixed()
window.attachEvent("onscroll", ig._fixed); //当滚动时,保持相对位置
}
function set(){
    if(ig.offsetLeft+w==0)
        d(1);
    else
        d(-1);
}
function d(n){
    var T=setTimeout("d("+n+")",1);
    n=n<0?n-20:n+20
    ig.style.left=ig.offsetLeft+n+"px"; 
    if(ig.offsetLeft+w<=0){
        clearTimeout(T);
        ig.style.left=-w+"px";
        btn.style.backgroundColor="#0000FF";
    }
    if(ig.offsetLeft>=0){
        clearTimeout(T);
        ig.style.left=0;
        btn.style.backgroundColor="#FF0000";
    }
}
</script>
</body>
</html>   上图红色处看不懂,请指点。