如何让div随着滚动条移动
沉着前进 2011-10-22
1.一个简单的jsp页面
<%@pagelanguage="java"pageEncoding="UTF-8"%>
<%@tagliburi="/struts-tags"prefix="s"%>
<%@pagetrimDirectiveWhitespaces="true"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>秒杀首页</title>
<metaname="keywords"content="横店,电影院,东莞电影,秒杀"/>
<linkrel="stylesheet"type="text/css"href="<%=basePath%>/home/css/seckilling_home.css"/>
<linkrel="stylesheet"type="text/css"href="<%=basePath%>/home/css/blue.css"/>
<linkrel="stylesheet"type="text/css"href="<%=basePath%>/home/css/popdiv.css"/>
<linkrel="stylesheet"href="<%=basePath%>/home/css/tipdiv.css"type="text/css"/>
<linkrel="stylesheet"href="<%=basePath%>/home/css/update_phone_tip.css"type="text/css"/>
<s:iftest="#session.member==null">
<linkrel="stylesheet"href="<%=basePath%>/home/css/logged_out.css"type="text/css"/>
</s:if><s:else>
<linkrel="stylesheet"href="<%=basePath%>/home/css/logged_on.css"type="text/css"></link>
</s:else>
<scripttype="text/javascript"src="<%=basePath%>/js/jquery.js"></script>
<scripttype="text/javascript"src="<%=basePath%>/home/js/seckilling_home.js"></script>
<scripttype="text/javascript"src="<%=basePath%>/home/js/seckilling.js"></script>
<scripttype="text/javascript"src="<%=basePath%>/home/js/quicklyLogin.js"></script>
<scripttype="text/javascript"src="<%=basePath%>/home/js/popdiv.js"></script>
<scripttype="text/javascript"src="<%=basePath%>/home/js/update_phone.js"></script>
</head>
<body>
<scripttype="text/javascript">
lastScrollY=0;
functionheartBeat(){
vardiffY;
if(document.documentElement&&document.documentElement.scrollTop)
diffY=document.documentElement.scrollTop;
elseif(document.body)
diffY=document.body.scrollTop
else
{/*Netscapestuff*/}
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
elsepercent=Math.floor(percent);
document.getElementById("full").style.top=parseInt(document.getElementById("full").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
}
suspendcode="<divid=\"full\"style='right:1px;POSITION:absolute;TOP:500px;z-index:100'><aonclick='window.scrollTo(0,0);'>返回顶部</a><br></div>"
document.write(suspendcode);
window.setInterval("heartBeat()",1);
</script>
<!--JiaThisButtonBEGIN-->
<scripttype="text/javascript"src="http://v2.jiathis.com/code/jiathis_r.js?type=left&move=0"charset="utf-8"></script>
<!--JiaThisButtonEND-->
<divid="main">
<divid="left"class="float_leftclear_left">
<divid="left_top">
<imgid="top_img0"src="<%=basePath%>/home/img/seckilling/seckilling_left_top.png"/>
<imgid="top_img1"src="<%=basePath%>/images/Seckilling_AD.jpg"width="276px"height="185px"/>
</div>
<divid="left_midden">
<divclass="show_row">
<s:iteratorvalue="M_list"status="boxes">
<s:iftest="#boxes.index%4==0">
<divid="goods_<s:propertyvalue="sid"/>"class="show_boxfloat_left"style="margin-left:0;">
</s:if>
<s:else>
<divid="goods_<s:propertyvalue="sid"/>"class="show_boxfloat_left">
</s:else>
<imgsrc="<%=basePath%>/home/img/seckilling/show_box.png"class="show_box_frame"/>
<s:iftest="activeEndTimeFromCurrentTime<0">
<imgsrc="<%=basePath%>/home/img/seckilling/seckilled.png"class="seckilled_mark"/>
</s:if>
<s:iftest="shoppingFid==null&&spicture!=null&&spicture!=''">
<imgsrc="<%=basePath%>/<s:propertyvalue="spicture"/>"class="show_box_goods"/>
</s:if>
<s:elseiftest="shoppingFid!=null">
<imgsrc="readPh.action?fid=<s:propertyvalue="shoppingFid"/>"class="show_box_goods"/>
</s:elseif>
<s:else>
<imgsrc="<%=basePath%>/home/img/no_img.png"class="show_box_goods"/>
</s:else>
<ahref="findShoppingById?sid=<s:propertyvalue="sid"/>"target="_blank"class="goods_image"onfocus="this.blur()"></a>
<spanclass="goods_spangoods_title"><ahref="findShoppingById?sid=<s:propertyvalue="sid"/>"target="_blank"title="<s:propertyvalue="sname"/>"><s:propertyvalue="omittedSname"/></a></span>
<spanclass="goods_spangoods_time">---</span>
<inputtype="hidden"name="activeStartTime"value="<s:propertyvalue="activeStartTime"/>"/>
<inputtype="hidden"name="remainingTime"value="<s:propertyvalue="remainingTime"/>"/>
<inputtype="hidden"name="backStartTime"value="<s:propertyvalue="longBackStartTime"/>"/>
<inputtype="hidden"name="activeEndTimeFromCurrentTime"value="<s:propertyvalue="activeEndTimeFromCurrentTime"/>"/>
<spanclass="goods_spangoods_price">秒杀价：<spanclass="price_symbol_size">￥<spanclass="price_money_size"><s:propertyvalue="activePrice"/></span></span></span>
<spanclass="goods_spangoods_realprice">原价：<spanclass="realprice_money_style">￥<s:propertyvalue="price"/></span></span>
<spanclass="goods_spangoods_btn"><aclass="btn_seckilling_wait"href="findShoppingById?sid=<s:propertyvalue="sid"/>"target="_blank"onfocus="this.blur()"> </a></span>
</div>
<s:iftest="#boxes.index%4==3&&!#boxes.last">
</div><divclass="show_row">
</s:if>
</s:iterator>
<s:iteratorvalue="M_list2"status="boxes">
<s:iftest="(#boxes.index+M_list.size%4)%4==0">
<divid="goods_seckilled_<s:propertyvalue="sid"/>"class="show_box1float_left"style="margin-left:0;">
</s:if>
<s:else>
<divid="goods_seckilled_<s:propertyvalue="sid"/>"class="show_box1float_left">
</s:else>
<imgsrc="<%=basePath%>/home/img/seckilling/show_box.png"class="show_box_frame"/>
<imgsrc="<%=basePath%>/home/img/seckilling/seckilled.png"class="seckilled_mark"/>
<s:iftest="shoppingFid==null&&spicture!=null&&spicture!=''">
<imgsrc="<%=basePath%>/<s:propertyvalue="spicture"/>"class="show_box_goods"/>
</s:if>
<s:elseiftest="shoppingFid!=null">
<imgsrc="readPh.action?fid=<s:propertyvalue="shoppingFid"/>"class="show_box_goods"/>
</s:elseif>
<s:else>
<imgsrc="<%=basePath%>/home/img/no_img.png"class="show_box_goods"/>
</s:else>
<ahref="findShoppingById?sid=<s:propertyvalue="sid"/>"target="_blank"class="goods_image"onfocus="this.blur()"></a>
<spanclass="goods_spangoods_title"><ahref="findShoppingById?sid=<s:propertyvalue="sid"/>"target="_blank"title="<s:propertyvalue="sname"/>"><s:propertyvalue="omittedSname"/></a></span>
<spanclass="goods_spangoods_time">秒杀结束</span>
<spanclass="goods_spangoods_price">秒杀价：<spanclass="price_symbol_size">￥<spanclass="price_money_size"><s:propertyvalue="activePrice"/></span></span></span>
<spanclass="goods_spangoods_realprice">原价：<spanclass="realprice_money_style">￥<s:propertyvalue="price"/></span></span>
<spanclass="goods_spangoods_btn"><aclass="btn_seckilling_wait"href="findShoppingById?sid=<s:propertyvalue="sid"/>"target="_blank"onfocus="this.blur()"> </a></span>
</div>
<s:iftest="(#boxes.index+M_list.size%4)%4==3&&!#boxes.last">
</div><divclass="show_row">
</s:if>
</s:iterator>
</div>
</div>
<divid="paging">
<!--<s:iftest="M_list.size>0">
<s:iteratorvalue="page.counter"id="counter"status="i">
<s:iftest="#i.first&&#counter>1"><aclass="nohover"style="cursor:default">...</a></s:if>
<s:iftest="#counter==page.currentPage"><spanclass="current_page"><s:property/></span></s:if>
<s:else><ahref="<%=basePath%>/seckilling?currentPage=<s:property/>&action=refresh"><s:property/></a></s:else>
<s:iftest="#i.last&&#counter<page.totalPages"><aclass="nohover"style="cursor:default">...</a></s:if>
</s:iterator>
</s:if>-->
</div>
</div>
<divid="right"class="float_right">
<divid="tipdiv"style="margin:30px0035px;">
<divid="tipdiv_top"></div>
<divid="tipdiv_middle"></div>
<divid="tipdiv_bottom"></div>
</div>
<divid="userbox_top">
<divid="login_frame">
<s:iftest="#session.member==null">
<br/>帐号：<inputtype="text"class="txt_style"name="username"id="username"/><br/>
<br/>密码：<inputtype="password"class="txt_style"name="password"id="password"/>
<p>
<spanstyle="margin:00025px;"><aid="login_img"onfocus="this.blur()"> </a></span>
<spanstyle="margin:0003px;display:none;"><aid="forget_password">忘记密码</a></span>
</p>
<divid="register_frame">
<ahref="<%=basePath%>/register"id="register_img"onfocus="this.blur()"> </a>
</div>
</s:if><s:else>
<p>昵称：<s:iftest="#session.member!=null&&#session.member.membersName!=null&&#session.member.membersName!=''"><s:propertyvalue="#session.member.membersName"/></s:if>
<s:else>神秘的熊猫人</s:else>
</p>
<p>手机号码：<spanstyle="color:#944CB1"><s:propertyvalue="#session.member.membersTelephone"/></span></p>
<p>
<spanstyle="margin:000100px;"><aid="update_phone">修改手机</a></span>
</p>
<divid="usercenter_frame">
<ahref="<%=basePath%>/usercenter"><imgsrc="<%=basePath%>/home/img/seckilling/btn_into_usercenter.png"></img></a>
</div>
</s:else>
</div>
</div>
<divid="right_mid">
<imgid="close"src="<%=basePath%>/home/img/seckilling/close.gif"style="position:absolute;margin:-60px10px0140px;"onclick="onCloseOntice()"/>
<s:iteratorvalue="orderdetailList">
<divclass="notice_text">
<s:propertyvalue="order.members.membersName"/>
在<s:datename="order.orderTime"format="HH:mm:ss"></s:date>
成功秒杀<s:propertyvalue="shopping.sname"/>
</div>
</s:iterator>
</div>
</div>
</div>
<divclass="clear_both">
<!--空的DIV，用于清除浮动所带来的影响-->
</div>
<divid="overlay"></div>
<divid="messagediv">
<divid="messagediv_top"></div>
<divid="messagediv_middle">
<divclass="messagediv_middle_top"><imgstyle="vertical-align:middle;"src="<%=basePath%>/home/img/popdiv/point.jpg"/><span></span></div>
<divclass="messagediv_middle_bottom"><ahref="#"onfocus="this.blur()"> </a></div>
</div>
<divid="messagediv_bottom"></div>
</div>
<divid="update_phone_frame">
<divid="update_phone_top"></div>
<divid="update_phone_middle">
<divid="update_phone_tip">
<divstyle="height:1px"></div>
<spanid="update_phone_tip_one"><p>该操作仅修改本次登录接收二维码的手机号码。<p></span>
<spanid="update_phone_tip_two">提示：若要修改默认接收号码，请到用户中心设置。<br/></span>
</div>
<divid="update_phone_number">
<span>修改号码：</span>
<inputtype="text"maxlength="11"name="phone_number"id="phone_number"/><spanstyle="color:#d00"> *</span>
<divid="update_phone_error"></div>
</div>
<divid="update_phone_btn">
<aid="update_phone_submit"><imgsrc="<%=basePath%>/home/img/seckilling/update_phone_submit.png"/></a>
<aid="update_phone_cancel"><imgsrc="<%=basePath%>/home/img/seckilling/update_phone_cancel.png"/></a>
</div>
</div>
<divid="update_phone_bottom"></div>
</div>
</body>
</html>
2。控制<divid="right_mid">随滚动条移动
<divid="right_mid">
<imgid="close"src="<%=basePath%>/home/img/seckilling/close.gif"style="position:absolute;margin:-60px10px0140px;"onclick="onCloseOntice()"/>
<s:iteratorvalue="orderdetailList">
<divclass="notice_text">
<s:propertyvalue="order.members.membersName"/>
在<s:datename="order.orderTime"format="HH:mm:ss"></s:date>
成功秒杀<s:propertyvalue="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());
});
});
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT