首页 > 代码库 > div相对浏览器移动
div相对浏览器移动
<%
String path = request.getContextPath();
%>
<!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:30px;
background-color:red;
}
</style>
<script type="text/javascript" src="http://www.mamicode.com//bbs/js/jquery-1.10.2.js"></script>
</head>
<body style="width:2000px;height:8000px">
<div class="scrolldiv" id="scrolldiv"></div>
</body>
<script type="text/javascript">
var timer;
$(function(){
$(window).scroll(function(){
clearInterval(timer);
var topScroll=getScroll();
var topDiv="1px";
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>
div相对浏览器移动