div固定悬浮（左侧、右侧、任意相对位置）

最新推荐文章于 2024-05-13 14:29:13 发布

yaoyanzhu

最新推荐文章于 2024-05-13 14:29:13 发布

阅读量5.7k

点赞数 1

分类专栏： JavaScript 文章标签： xhtml javascript 前端 ViewUI

本文链接：https://blog.csdn.net/yaoyanzhu/article/details/84378326

版权

JavaScript 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!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>

yaoyanzhu

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
div固定悬浮（左侧、右侧、任意相对位置）

e宝账--帮助中心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; i...
复制链接

扫一扫