JQuery實現Div跟隨滾動條移動不閃爍效果
作者：佚名
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
來源：
互聯網
