<!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>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
    <script type="text/javascript"> 
    var c_height, c_width, scroll_left,scroll_top,scroll_Top,counter;
    counter = 0;
    scroll_top = document.documentElement.scrollTop;
   function position() {
       c_width = document.documentElement.clientWidth;
       c_height = document.documentElement.clientHeight;
       scroll_left = document.documentElement.scrollLeft;
       scroll_top = document.documentElement.scrollTop;
       var div_dom = document.getElementById('divId');
       div_dom.style.left = c_width - 52 + scroll_left + 'px';
       div_dom.style.top = c_height - 208 + scroll_top + 'px';
   }
   
   function changeColor() {
       var li_obj = document.getElementById('divId').getElementsByTagName('li');
       theCurrentScrollTop = document.documentElement.scrollTop;
       if(theCurrentScrollTop -  scroll_Top > 10) {
           for(var i=0; i<li_obj.length; i++) {
               li_obj[i].className = '';
           }
           document.getElementById('divId').getElementsByTagName('li')[counter].className = 'current';
           counter++;
           if(counter > 3) {
               counter = 0;
           }
       }
       if(theCurrentScrollTop -  scroll_Top < 10) {
           for(var i=0; i<li_obj.length; i++) {
               li_obj[i].className = '';
           }
           document.getElementById('divId').getElementsByTagName('li')[counter].className = 'current';
           counter--;
           if(counter < 0) {
               counter = 3;
           }
       }
       scroll_Top = theCurrentScrollTop;
   }
   
   window.onload = function() {
       position();
   }
   window.onscroll = function() {
    position();
    changeColor();
   }
   window.onresize = function() {
    position();
   }
    </script>
    <style type="text/css">
body { margin:0; padding:0; }
ul { list-style:none; }
ul,li { margin:0; padding:0; }
ul li { width:50px; height:50px; border:1px solid #000; }
#divId { position:absolute; }
.current { background-color:red; }
    </style>
    </head>
    <body>
    <div style='height:1000px;'></div>
    <div id='divId'>
     <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     </ul>
    </div>
    </body>
    </html>大侠看看我的滚动tab为什么老是闪啊,而且还有些错误,怎么改?