如何让div随着滚动条移动

最新推荐文章于 2021-07-14 18:17:49 发布
最新推荐文章于 2021-07-14 18:17:49 发布
阅读量1k 收藏
点赞数 1
文章标签： jsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/snow9547/article/details/84052124
版权
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 οnclick='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" class="float_left clear_left">
<div id="left_top">
<img id="top_img0" 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 class="show_row">
<s:iterator value="M_list" status="boxes">

<s:if test="#boxes.index%4==0">
<div id="goods_<s:property value="sid"/>" class="show_box float_left" style="margin-left:0;">
</s:if>
<s:else>
<div id="goods_<s:property value="sid"/>" class="show_box float_left">
</s:else>
<img src="<%=basePath %>/home/img/seckilling/show_box.png" class="show_box_frame"/>
<s:if test="activeEndTimeFromCurrentTime < 0">
<img src="<%=basePath %>/home/img/seckilling/seckilled.png" class="seckilled_mark"/>
</s:if>
<s:if test="shoppingFid == null && spicture != null && spicture != ''">
<img src="<%=basePath %>/<s:property value="spicture"/>" class="show_box_goods"/>
</s:if>
<s:elseif test="shoppingFid != null">
<img src="readPh.action?fid=<s:property value="shoppingFid"/>" class="show_box_goods"/>
</s:elseif>
<s:else>
<img src="<%=basePath %>/home/img/no_img.png" class="show_box_goods"/>
</s:else>
<a href="findShoppingById?sid=<s:property value="sid"/>" target="_blank" class="goods_image" οnfοcus="this.blur()"></a>
<span class="goods_span goods_title"><a href="findShoppingById?sid=<s:property value="sid"/>" target="_blank" title="<s:property value="sname"/>"><s:property value="omittedSname"/></a></span>

<span class="goods_span goods_time">---</span>
<input type="hidden" 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 class="goods_span goods_price">秒杀价：<span class="price_symbol_size">￥<span class="price_money_size"><s:property value="activePrice"/></span></span></span>
<span class="goods_span goods_realprice">原价：<span class="realprice_money_style">￥<s:property value="price"/></span></span>
<span class="goods_span goods_btn"><a class="btn_seckilling_wait" href="findShoppingById?sid=<s:property value="sid"/>" target="_blank" οnfοcus="this.blur()"> </a></span>
</div>
<s:if test="#boxes.index%4==3&&!#boxes.last">
</div><div class="show_row">
</s:if>
</s:iterator>

<s:iterator value="M_list2" status="boxes">

<s:if test="(#boxes.index+M_list.size%4)%4==0">
<div id="goods_seckilled_<s:property value="sid"/>" class="show_box1 float_left" style="margin-left:0;">
</s:if>
<s:else>
<div id="goods_seckilled_<s:property value="sid"/>" class="show_box1 float_left">
</s:else>
<img src="<%=basePath %>/home/img/seckilling/show_box.png" class="show_box_frame"/>
<img src="<%=basePath %>/home/img/seckilling/seckilled.png" class="seckilled_mark"/>
<s:if test="shoppingFid == null && spicture != null && spicture != ''">
<img src="<%=basePath %>/<s:property value="spicture"/>" class="show_box_goods"/>
</s:if>
<s:elseif test="shoppingFid != null">
<img src="readPh.action?fid=<s:property value="shoppingFid"/>" class="show_box_goods"/>
</s:elseif>
<s:else>
<img src="<%=basePath %>/home/img/no_img.png" class="show_box_goods"/>
</s:else>
<a href="findShoppingById?sid=<s:property value="sid"/>" target="_blank" class="goods_image" οnfοcus="this.blur()"></a>
<span class="goods_span goods_title"><a href="findShoppingById?sid=<s:property value="sid"/>" target="_blank" title="<s:property value="sname"/>"><s:property value="omittedSname"/></a></span>

<span class="goods_span goods_time">秒杀结束</span>

<span class="goods_span goods_price">秒杀价：<span class="price_symbol_size">￥<span class="price_money_size"><s:property value="activePrice"/></span></span></span>
<span class="goods_span goods_realprice">原价：<span class="realprice_money_style">￥<s:property value="price"/></span></span>
<span class="goods_span goods_btn"><a class="btn_seckilling_wait" href="findShoppingById?sid=<s:property value="sid"/>" target="_blank" οnfοcus="this.blur()"> </a></span>
</div>
<s:if test="(#boxes.index+M_list.size%4)%4==3&&!#boxes.last">
</div><div class="show_row">
</s:if>
</s:iterator>
</div>
</div>

<div id="paging">
<!--<s:if test="M_list.size > 0">
<s:iterator value="page.counter" id="counter" status="i">
<s:if test="#i.first && #counter > 1"><a class="nohover" style="cursor: default">...</a></s:if>
<s:if test="#counter == page.currentPage"><span class="current_page"><s:property/></span></s:if>
<s:else><a href="<%=basePath %>/seckilling?currentPage=<s:property/>&action=refresh"><s:property/></a></s:else>
<s:if test="#i.last && #counter < page.totalPages"><a class="nohover" style="cursor: default">...</a></s:if>
</s:iterator>
</s:if>-->
</div>
</div>

<div id="right" class="float_right">
<div id="tipdiv" 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" class="txt_style" name="username" id="username"/><br />
<br />密码：<input type="password" class="txt_style" name="password" id="password"/>
<p>
<span style="margin:0 0 0 25px;"><a id="login_img" οnfοcus="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" οnfοcus="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;" οnclick="onCloseOntice()"/>
<s:iterator value="orderdetailList">
<div class="notice_text">
<s:property value="order.members.membersName"/>
在<s:date name="order.orderTime" format="HH:mm:ss"></s:date>
成功秒杀<s:property value="shopping.sname"/>
</div>
</s:iterator>
</div>
</div>
</div>
<div class="clear_both">
<!-- 空的DIV，用于清除浮动所带来的影响 -->
</div>
<div id="overlay"></div>
<div id="messagediv">
<div id="messagediv_top"></div>
<div id="messagediv_middle">
<div class="messagediv_middle_top"><img style="vertical-align:middle;" src="<%=basePath %>/home/img/popdiv/point.jpg" /><span></span></div>
<div class="messagediv_middle_bottom"><a href="#" οnfοcus="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;" οnclick="onCloseOntice()"/>
<s:iterator value="orderdetailList">
<div class="notice_text">
<s:property value="order.members.membersName"/>
在<s:date name="order.orderTime" 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());
});
});
snow9547
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
div跟随水平滚动条移动
03-10
div或其他html块内容跟随滚动条移动，滚动移动时，内容跟着移动，并保持最右边
js实现随滚动条滚动div位置动态变化
qq_35997468的博客
06-10 1万+
js实现随滚动条滚动，div位置动态变化，使div不会因为滚动条的下滑而导致div被上部边界覆盖。
让DIV跟着滚动条移动
hedahai119的专栏
08-16 442
jQuery(window).scroll( function() { var bottomHeight = "-"+document.documentElement.scrollTop; jQuery("#chatToolBar").css("bottom", bottomHeight + "px"); } );  
Div层随滚动条移动
雪飘过海
06-22 1万+
New Document window.onscroll=function(){ var oDiv=document.getElementById("d"); oDiv.style.top=document.body.scrollTop + 300;  //控制上下位置oDiv.style.left = document.body.scrollLeft + 300; //控制横向位置} as
使用jq实现fixed定位随滚动条,左右滚动
这有个小明
03-23 1728
var navLeft; $(window).scroll(function(){ navLeft = -$(window).scrollLeft(); $(".navLine").css("left", navLeft); })
jQuery实现将div的滚动条滚动到指定位置
10-27
在网页开发中，jQuery是一个非常...总的来说，通过jQuery的`animate()`方法，我们可以轻松地实现div滚动条的动态控制，为用户提供更加友好的交互体验。这个功能在展示长列表、分页内容或者需要聚焦某个部分时特别有用。
基于JavaScript实现div层跟随滚动条滑动
10-22
项目需求是这样的：在一个页面放2个悬浮框，悬浮框随页面的上下滚动有上下波动的效果，最终固定在同一位置，下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料，对js div跟随滚动条滑动相关...
div浮层,滚动条移动,位置保持不变的4种方法汇总
09-04
这里将介绍4种实现div浮层在滚动条移动时保持位置不变的方法。 **方法一：使用CSS绝对定位** 这是最基础的方法，通过CSS的`position: absolute;`属性来实现。当页面滚动时，设置了绝对定位的元素相对于最近的非...
div滚动条优化
11-01
"div滚动条优化"这个主题主要关注如何在不牺牲滚动功能的前提下，通过CSS样式和JavaScript技术来美化或定制滚动条，使其更加符合现代网页的审美标准和用户体验需求。 首先，我们要了解默认滚动条的样式通常是浏览器...
如何设置跟随滚动条一起滚动的div
热门推荐
flygoa的专栏
06-17 3万+
原理 使用css的定位属性position，设其值为fixed即可，该属性是将指定元素绝对定位于窗体，使用left，right，top和bottom属性来设置偏移于窗体原点的位置。 实例源码 .mainBox{ margin:0px 10px; width:400px; height:400px; position:relative
div不随滚动条的移动而改变位置
01-12
div固定在屏幕的一个位置，不随滚动条的拖动而改变位置
html自动移动滚动条,css如何实现div随滚动条移动？
weixin_35160938的博客
05-31 2036
通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。那么该如何实现div随滚动条移动。使用css的定位属性position，设其值为fixed即可，该属性是将指定元素绝对定位于窗体，使用left，right，top和bottom属性来设置偏移于窗体原点的位置。示例：.mainBox{m...
DIV怎么自动添加滚动条？并给滚动条添加样式
m0_46652188的博客
07-14 9975
如何实现当DIV里的内容超过DIV的高度，DIV会自动添加滚动条 1.　div的style设置了overflow:auto后，当DIV里的内容超过DIV的高度，DIV会自动添加滚动条，拉动滚动条才能看到底.
一个跟随滚动条移动的固定div
weixin_41053404的博客
12-28 3058
一个简单的跟随滚动条移动的效果， href="#" target="_blank">.NET Javascript jQuery C# 其他 首页 $(function () { var ie6 = document.all; var dv = $('#fixedMenu_keleyi_com'), st; dv.attr('otop',
Jquery实现div层随滚动条滚动而滚动
zhoupeng的专栏
11-06 8772
针对网页div层浮动，随滚动条滚动而移动，在各大门户网站上可以说随处可见。下面就应用系统实现div浮动实例说明： 应用系统展现内容时，由于内容过多，返回按钮放到页头或页末，对用户来说操作都不方面。这个实例就是实现div层“返回”按钮随滚动条滚动而滚动。 html代码： 返回
html 自定义菜单随着滚动条滑动
想吃大盘鸡
08-23 2412
1.给一个div &lt;style&gt; #menu{ position: relative;top: 0px; } &lt;/style&gt; &lt;div id="menu"&gt; &lt;/div&gt; 2.事件菜单，点击 &lt;script&gt; function showHide(num){ if(num==1){ $(...
div层随滚动条移动
daha33的博客
09-21 225
[code] 随滚动条移动的层 - 51windows.Net 正中... function sc1(){ document.getElementById("Javascript.Div1").style.top=(document.documentElement.scrollTop+(document.documentEl...
如果使用一个table实现部分列冻结并且不随着横向滚动条移动
最新发布
05-26
要实现部分列冻结并且不随着横向滚动条移动，可以使用 CSS 的 position 属性和 z-index 属性来实现。 首先，将表格分为两个部分，左边是需要冻结的列，右边是不需要冻结的列。然后将左边的表格使用 position: fixed...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值