如何让div随着滚动条移动
1.一个简单的jsp页面
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!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>
<meta name="keywords" content="横店,电影院,东莞电影,秒杀" />
<link rel="stylesheet" type="text/css" href="<%=basePath %>/home/css/seckilling_home.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath %>/home/css/blue.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath %>/home/css/popdiv.css" />
<link rel="stylesheet" href="<%=basePath %>/home/css/tipdiv.css" type="text/css" />
<link rel="stylesheet" href="<%=basePath %>/home/css/update_phone_tip.css" type="text/css" />
<s:if test="#session.member == null">
<link rel="stylesheet" href="<%=basePath %>/home/css/logged_out.css" type="text/css" />
</s:if><s:else>
<link rel="stylesheet" href="<%=basePath %>/home/css/logged_on.css" type="text/css"></link>
</s:else>
<script type="text/javascript" src="<%=basePath %>/js/jquery.js"></script>
<script type="text/javascript" src="<%=basePath %>/home/js/seckilling_home.js"></script>
<script type="text/javascript" src="<%=basePath %>/home/js/seckilling.js"></script>
<script type="text/javascript" src="<%=basePath %>/home/js/quicklyLogin.js"></script>
<script type="text/javascript" src="<%=basePath %>/home/js/popdiv.js"></script>
<script type="text/javascript" src="<%=basePath %>/home/js/update_phone.js"></script>
</head>
<body>
<script type="text/javascript">
lastScrollY=0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{/*Netscape stuff*/}
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("full").style.top=parseInt(document.getElementById("full").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
}
suspendcode="<div id="full" style='right:1px;POSITION:absolute;TOP:500px;z-index:100'><a onclick='window.scrollTo(0,0);'>返回顶部</a><br></div>"
document.write(suspendcode);
window.setInterval("heartBeat()",1);
</script>
<!-- JiaThis Button BEGIN -->
<script type="text/javascript" src="http://v2.jiathis.com/code/jiathis_r.js?type=left&move=0" charset="utf-8"></script>
<!-- JiaThis Button END -->
<div id="main">
<div id="left" src="<%=basePath %>/home/img/seckilling/seckilling_left_top.png"/>
<img id="top_img1" src="<%=basePath %>/images/Seckilling_AD.jpg" width="276px" height="185px" />
</div>
<div id="left_midden">
<div status="boxes">
<s:if test="#boxes.index%4==0">
<div id="goods_<s:property value="sid"/>" style="margin-left:0;">
</s:if>
<s:else>
<div id="goods_<s:property value="sid"/>" target="_blank" onfocus="this.blur()"></a>
<span target="_blank" title="<s:property value="sname"/>"><s:property value="omittedSname"/></a></span>
<span name="activeStartTime" value="<s:property value="activeStartTime" />" />
<input type="hidden" name="remainingTime" value="<s:property value="remainingTime" />" />
<input type="hidden" name="backStartTime" value="<s:property value="longBackStartTime" />" />
<input type="hidden" name="activeEndTimeFromCurrentTime" value="<s:property value="activeEndTimeFromCurrentTime" />" />
<span href="findShoppingById?sid=<s:property value="sid"/>" target="_blank" onfocus="this.blur()"> </a></span>
</div>
<s:if test="#boxes.index%4==3&&!#boxes.last">
</div><div status="boxes">
<s:if test="(#boxes.index+M_list.size%4)%4==0">
<div id="goods_seckilled_<s:property value="sid"/>" style="margin-left:0;">
</s:if>
<s:else>
<div id="goods_seckilled_<s:property value="sid"/>" target="_blank" onfocus="this.blur()"></a>
<span target="_blank" title="<s:property value="sname"/>"><s:property value="omittedSname"/></a></span>
<span href="findShoppingById?sid=<s:property value="sid"/>" target="_blank" onfocus="this.blur()"> </a></span>
</div>
<s:if test="(#boxes.index+M_list.size%4)%4==3&&!#boxes.last">
</div><div id="counter" status="i">
<s:if test="#i.first && #counter > 1"><a style="cursor: default">...</a></s:if>
</s:iterator>
</s:if>-->
</div>
</div>
<div id="right" style="margin:30px 0 0 35px;">
<div id="tipdiv_top"></div>
<div id="tipdiv_middle"></div>
<div id="tipdiv_bottom"></div>
</div>
<div id="userbox_top">
<div id="login_frame">
<s:if test="#session.member == null">
<br />帐号：<input type="text" name="username" id="username"/><br />
<br />密码：<input type="password" name="password" id="password"/>
<p>
<span style="margin:0 0 0 25px;"><a id="login_img" onfocus="this.blur()"> </a></span>
<span style="margin:0 0 0 3px;display:none;"><a id="forget_password">忘记密码</a></span>
</p>
<div id="register_frame">
<a href="<%=basePath %>/register" id="register_img" onfocus="this.blur()"> </a>
</div>
</s:if><s:else>
<p>昵称：<s:if test="#session.member != null && #session.member.membersName != null && #session.member.membersName != ''"><s:property value="#session.member.membersName" /></s:if>
<s:else>神秘的熊猫人</s:else>
</p>
<p>手机号码：<span style="color:#944CB1"><s:property value="#session.member.membersTelephone" /></span></p>
<p>
<span style="margin:0 0 0 100px;"><a id="update_phone">修改手机</a></span>
</p>
<div id="usercenter_frame">
<a href="<%=basePath %>/usercenter"><img src="<%=basePath %>/home/img/seckilling/btn_into_usercenter.png"></img></a>
</div>
</s:else>
</div>
</div>
<div id="right_mid">
<img id="close" src="<%=basePath%>/home/img/seckilling/close.gif" style="position:absolute;margin:-60px 10px 0 140px;" onclick="onCloseOntice()"/>
<s:iterator value="orderdetailList">
<div format="HH:mm:ss"></s:date>
成功秒杀<s:property value="shopping.sname"/>
</div>
</s:iterator>
</div>
</div>
</div>
<div src="<%=basePath %>/home/img/popdiv/point.jpg" /><span></span></div>
<div onfocus="this.blur()"> </a></div>
</div>
<div id="messagediv_bottom"></div>
</div>
<div id="update_phone_frame">
<div id="update_phone_top"></div>
<div id="update_phone_middle">
<div id="update_phone_tip">
<div style="height:1px"></div>
<span id="update_phone_tip_one"><p>该操作仅修改本次登录接收二维码的手机号码。<p></span>
<span id="update_phone_tip_two">提示：若要修改默认接收号码，请到用户中心设置。<br /></span>
</div>
<div id="update_phone_number">
<span>修改号码：</span>
<input type="text" maxlength="11" name="phone_number" id="phone_number" /><span style="color:#d00"> *</span>
<div id="update_phone_error"></div>
</div>
<div id="update_phone_btn">
<a id="update_phone_submit"><img src="<%=basePath %>/home/img/seckilling/update_phone_submit.png" /></a>
<a id="update_phone_cancel"><img src="<%=basePath %>/home/img/seckilling/update_phone_cancel.png" /></a>
</div>
</div>
<div id="update_phone_bottom"></div>
</div>
</body>
</html>
2。控制 <div id="right_mid">随滚动条移动
<div id="right_mid">
<img id="close" src="<%=basePath%>/home/img/seckilling/close.gif" style="position:absolute;margin:-60px 10px 0 140px;" onclick="onCloseOntice()"/>
<s:iterator value="orderdetailList">
<div format="HH:mm:ss"></s:date>
成功秒杀<s:property value="shopping.sname"/>
</div>
</s:iterator>
</div>
3。实现滚动的js代码
$(document).ready(function(){
$("#right_mid").css("top",460+$(document).scrollTop());
$(window).scroll(function(){
$("#right_mid").css("top",200+$(document).scrollTop());
});
});
