JQuery實現Div跟隨滾動條移動不閃爍效果

作者：佚名 2011-09-01 13:17:46

JQuery實現Div跟隨滾動條移動不閃爍效果是本文要介紹的內容，主要是通過一段代碼來了解JQuery所實現的一個效果，具體內容的實現來看本文詳解。

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跟隨滾動條移動不閃爍效果的內容介紹完了，希望通過本文的學習能對你有所幫助！

責任編輯：zhaolei 來源：互聯網

JQuery 滾動