JQuery实现Div跟随滚动条移动不闪烁效果-div 滚动条

JQuery实现Div跟随滚动条移动不闪烁效果是本文要介绍的内容，主要是通过一段代码来了解JQuery所实现的一个效果，具体内容的实现来看本文详解。

<!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> 
    <title>无标题页</title> 
    <style type="text/css"> 
    .test{  
    width:100px;  
    height:200px;  
    position:absolute;  
    top:100px;  
    left:30px;  
    background-color:red;  
    }  
    </style> 
    <script type="text/javascript" src="jquery-1.3.2-vsdoc2.js"></script> 
    <script type="text/javascript"> 
    var timer;  
    $(function(){  
      $(window).scroll(function(){  
        clearInterval(timer);  
        var topScroll=getScroll();  
        var topDiv="100px";  
        var top=topScroll+parseInt(topDiv);  
        timer=setInterval(function(){  
            //$(".test").css("top", top+"px");  
             $(".test").animate({"top":top},500);  
        },500)  
      })  
    })  
    function getScroll(){  
         var bodyTop = 0;    
         if (typeof window.pageYOffset != 'undefined') {    
             bodyTop = window.pageYOffset;    
         } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {    
             bodyTop = document.documentElement.scrollTop;    
         }    
         else if (typeof document.body != 'undefined') {    
             bodyTop = document.body.scrollTop;    
         }    
         return bodyTop  
    }  
    </script> 
</head> 
<body style="width:2000px;height:8000px"> 
<div class="test"></div> 
</body> 
</html>

小结：JQuery实现Div跟随滚动条移动不闪烁效果的内容介绍完了，希望通过本文的学习能对你有所帮助！