睢闫网络为您打造全面营销系统,营销网络建设第一品牌!
验证码: 看不清?点击更换
注册
签到 网页翻译为英文
1823-8012-605

营销型网络系统 顶级核心团队

让传统企业获得更多的订单和询盘!

您现在所在的位置:主页 > 网站建设

div固定悬浮(左侧、右侧、任意相对位置)

时间:2015-09-14 15:01    来源:睢闫网络传媒   访问人数:  业务咨询    在线下单
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>e宝账--帮助中心</title> 
<script type="text/javascript"> 
function scrollx(p) { 
var d = document, dd = d.documentElement, db = d.body, w = window, o = d.getElementById(p.id), ie6 = /msie 6/i.test(navigator.userAgent), style, timer; 
if (o) { 
  cssPub = ";position:"+(p.f&&!ie6?'fixed':'absolute')+";"+(p.t!=undefined?'top:'+p.t+'px;':'bottom:0;'); 
  if (p.r != undefined && p.l == undefined) { 
   o.style.cssText += cssPub + ('right:'+p.r+'px;'); 
  } else { 
   o.style.cssText += cssPub + ('margin-left:'+p.l+'px;'); 
  } 
  if(p.f&&ie6){ 
   cssTop = ';top:expression(documentElement.scrollTop +'+(p.t==undefined?dd.clientHeight-o.offsetHeight:p.t)+'+ "px" );'; 
   cssRight = ';right:expression(documentElement.scrollright + '+(p.r==undefined?dd.clientWidth-o.offsetWidth:p.r)+' + "px")'; 
   if (p.r != undefined && p.l == undefined) { 
    o.style.cssText += cssRight + cssTop; 
   } else { 
    o.style.cssText += cssTop; 
   } 
   dd.style.cssText +=';background-image: url(about:blank);background-attachment:fixed;'; 
  }else{ 
   if(!p.f){ 
    w.onresize = w.onscroll = function(){ 
     clearInterval(timer); 
     timer = setInterval(function(){ 
      //双选择为了修复chrome 下xhtml解析时dd.scrollTop为 0 
      var st = (dd.scrollTop||db.scrollTop),c; 
      c = st - o.offsetTop + (p.t!=undefined?p.t:(w.innerHeight||dd.clientHeight)-o.offsetHeight); 
      if(c!=0){ 
       o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0?-1:1) + 'px'; 
      }else{ 
       clearInterval(timer); 
      } 
     },10) 
    } 
   } 
  } 


</script> 
</head> 
<body> 
<div style="width:700px; margin:0 auto; height:1000px; background:#ccc"> 
<div id="float_father">相对固定</div> 
<div id="float_father_2">相对固定(动)</div> 
<p>测试内容</p> 
<p>测试内容</p> 
</div> 
<div id="float_left">左侧固定</div> 
<div id="float_right">右侧固定</div> 
<script type="text/javascript"> 
//左右侧固定浮动的div建议放在html的最低部 
//右侧固定 
scrollx({id:'float_right', r:0, t:200, f:1}); 
//左侧固定 
scrollx({id:'float_left', t:200, f:1}); 
//相对父级相定固定 
scrollx({id:'float_father', l:300, t:200, f:1}); 
//页面滚动同时滚动固定对像 
scrollx({id:'float_father_2', l:500, t:300, f:0}); 
/* 
scrollx参数说明 

id:浮动对象的id 
r:右边距(窗口右边距,不写为靠左浮动) 
l:左边距(距离父级对象的左边距) “r”和“l”只能有其中一个参数 
t:上边距(默认贴着底边,0是贴着顶边) 
f:1表示固定(不写或者0表示滚动) 
*/ 
</script> 
</body> 
</html>
下载此文章
联系方式

中国 · 睢县 · 建设路天湖城1005号

公司: 睢闫网络传媒有限公司

电话:1823-8012-605

邮箱:732541231@qq.com

QQ在线咨询

商务服务或业务咨询请点击以下QQ头像

网站建设-点击洽谈

数据库系统-点击洽谈

其他项目-点击洽谈

至电顾问需求或技术支持

需要做项目或需要技术支持业务请来电,谢谢!

18238012605 -郑经理

18336092044 -李经理

18671257743 -艾经理

告诉我们您的需求

在线填写需求,我们将尽快为您答疑解惑。

业务咨询QQ:732541231

售后服务QQ:732541231

电话:1823-8012-605

工作时间 9:00 ~ 18:00

工作日(周一至周五)

我们将在1个小时内回复,资料会保密处理。