安科网

如何让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&amp;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()">&nbsp;</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()">&nbsp;</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()">&nbsp;</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()">&nbsp;</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()">&nbsp;</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">&nbsp;*</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());

});

});

css div滚动条 div

沉着前进

沉着前进

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

纯CSS实现密室逃脱游戏

“密室逃脱”这个词想必大家并不陌生，在以前的flash时代，这是一类很经典的益智游戏之一。玩家常常会被困在一间密室中，而过关的目的就是想法设法逃出这件密室。接下来，笔者要用纯CSS实现一款类似的密室逃脱类游戏。是的，你没听错，纯CSS，也就意味着完全没有J

qiupu 2020-11-04

一篇文章带你了解CSS对齐方式

将块元素水平居中对齐 , 使用 margin: auto;设置元素的宽度将阻止它伸展到容器的边缘。将元素内部的文本居中, 使用text-align: center;对齐元素的一种方法是使用 position: absolute;在我年轻而脆弱的岁月里，父亲

多读书读好书 2020-11-03

Node Sass 弃用，以 Dart Sass 代替

就在今天，Sass 官方团队正式宣布 Libsass 将弃用，以及基于它的 Node Sass 和 SassC，并且建议用户使用 Dart Sass。读完本文以下问题将会得到解答。那么为什么会有这次改动呢?之后 Node Sass 还维护吗?Dart S

RedCode 2020-10-28

CSS元素选择器是怎样运作的？

在前端工程师的日常工作中，使用 CSS 元素选择器是稀松平常的事；无论你是编写一般的 CSS 还是需要经过编译的 SASS，SCSS，LESS等，最终都被编译成一行一行的 CSS 样式属性，最终交给浏览器解析并套用。但是你想过没有这是如何实现的呢?CSS

jiedinghui 2020-10-25

CSS(Cascading Style Sheets)样式更改——过渡、动画

元素从一种样式逐渐改变为另一种的样式。cubic-bezier在cubic-bezie函数中定义自己的值，可能的值是0至1之间的数值

Ladyseven 2020-10-22

多个你不知道的 CSS 居中方案！

要使内联元素居中，使用 text-align: center 足够了。对于多个内联的项目，也可以正常工作。使用网格容器时，图中的盘子将根据其网格区域居中。请注意，除非将它们包裹在一个元素中，否则这将不适用于多个盘子。宽度和高度已知的块元素可以通过设置mar

hellowzm 2020-10-12

540 CSS3属性对层叠上下文的影响

-- 案例二分解:opacity -->

impress 2020-10-07

如何在Shadow DOM/Web组件中覆盖CSS

Web组件的主要目的之一是提供封装——能够隐藏HTML标记结构和CSS样式，并与页面上的其他代码分离，这样不同的部分就不会冲突，通过这种方式，这样代码就可以保持漂亮和干净。影子DOM为我们提供了范围限定的样式封装，并提供了一种让我们随意选择进入外界的方法。

zuncle 2020-09-28

超越媒体查询：使用更新的HTML和CSS功能进行响应式设计

在本文中，我们将探讨许多可用的工具，从响应图像到相对较新的CSS函数，无论我们是否使用媒体查询，它们都可以正常工作。事实上，媒体查询与这些功能一起使用时，更多的是成为一种补充，而不是完整的方法。让我们来看看是如何运作的。图像可能会变形到失去焦点的程度。较小

Ladyseven 2020-09-11

5个好用的 CSS 函数

CSS 包含了许多函数，而且它能够完成许多早期需要用 JavaScript才能完成的事情。每年都有新的特性被添加进来，这让我们的开发更加轻松，也减少了对JavaScript的依赖。CSS 函数是它所具有的最强大的特性之一，在本文中，我将介绍一些我认为有

jiedinghui 2020-09-07

使用这些不太常用的 CSS 属性，让我在前端布局效率上，又提高了一个层次！

有很多CSS属性，有些人不了解，或者他们了解它们，但是忘记在需要时使用它们。其实，有时候我们用 JavaScript 来实某些交互，CSS 一个属性就能搞定了，这可以大大节约我们编码的时间。作为前端开发人员，我们经常会遇到这样的事情。所以我问自己，为什么

xiaohuli 2020-09-02

16个非常有用的CSS伪选择器，你千万不要错过了！

熟悉所有的 CSS 是实现这个目标的一种方法 —— 另一种是实施最佳实践和尽可能的减少代码。这个伪元素选择器选择换行之前文本的首行。这个伪元素选择器应用于元素中文本的首字母。应用于任何被用户选中的高亮区域。在 HTML 中，为 HTML 元素。这个规则将应

葉無聞 2020-09-01

总结一些，我在书写 CSS 的时候，经常犯的错误！

当我们非常专注写代码时候，我们往往会无意识的写出一些无效CSS代码。我把这种称为 “潜意识错误”。不过，这些错误都比较好解决，不需要花很多时间，只要纠正一下就行了。跟着本文看看，我会经常写哪些有趣的 CSS 错误。/*现这一点并不容易，你们看出错误在哪里吗

impress 2020-08-26

一个思路，如何尝试创建自己的CSS框架？

在2019年，我创建了一个CSS框架并将其命名为Rotala.css[1]。经过一些重构和修改，我终于在2020年发布了“玩具”框架。但它仍在原型设计中，因为我认为我的解决方案还不优雅。我构建此框架的原因很简单：我自己想要一个CSS框架。最初，我开始使用

ThikHome 2020-08-24

前端开发CSS清除浮动的方法有哪些？

在前端开发过程中，非IE浏览器下，当容器的高度自动，并且容器内容中有浮动元素，此时如果容器的高度不能自适应内容的高度，从而使得内容溢出破坏整体布局，这种现象叫做浮动溢出，为了方式这个现象的发生，就需要对CSS样式进行处理，而这个过程就叫做CSS清除浮动。现

nicepainkiller 2020-08-20

多终端同步工具browsersync安装使用

2：进入项目目录 window可以进到目标目录，shift+右键，在此处打开命令窗口 也可以cmd里面切换进入

aSuncat 2020-08-19

CSS知识点（三）

text-align:center:内容水平居中，可以让行内元素和行内块元素水平居中，不可以让块状元素居中。则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者?,这种现象被称为相邻块元素垂直外边距的合并。确定页

hellowzm 2020-08-18

css浮动

2、为什么要清除浮动？

aSuncat 2020-08-18

HTML&amp;CSS 案例

案例 1：旅游网站首页。确定使用table来完成布局。如果某一行只有一个单元格，则使用<tr><td></td></tr>

zengni 2020-08-17

css 背景图片路径问题

background-size: 宽 高 | cover 完全覆盖 | contain 宽高自动调节

zhanghaibing00 2020-08-17
沉着前进

沉着前进

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号