div跟着滚动条移动而移动

来源:互联网 发布:php免杀一句话木马 编辑:程序博客网 时间:2024/05/01 08:03
<!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 charset="UTF-8">    <title>无标题页</title>    <style type="text/css">    .scrolldiv{    width:100px;    height:200px;    position:absolute;    top:300px;    left:1300px;    background-color:red;    }    </style><script type="text/javascript" src="jquery-1.8.0.min.js"></script></head><body style="width:2000px;height:8000px"><div class="scrolldiv"></div></body> <script type="text/javascript">    var timer;    $(function(){        $(window).scroll(function(){            clearInterval(timer);            var topScroll=getScroll();            var topDiv="300px";            //设置初始位置            var top=topScroll+parseInt(topDiv);            timer=setInterval(function(){                    //$(".test").css("top", top+"px");                     $(".scrolldiv").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></html>
0 0
原创粉丝点击