怎样让层不随滚动条一起动？能固定在一个位置

时间：2022-12-21 10:29:23
怎样让层不随滚动条一起动？能固定在一个位置

15 个解决方案

#1

<div>ok</div>

#2

默认的就固定在一个位置的。
楼上的就是。。

#3

晕死.........

#4

楼主的意思是要悬浮的层。

#5

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
window.onerror = null;
var topMargin = 150;
var slideTime = 3000;
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
function layerObject(id,left) {
if (ns6) {
this.obj = document.getElementById(id).style;
this.obj.left = left;
return this.obj;
}
else if(ie4) {
this.obj = document.all[id].style;
this.obj.left = left;
return this.obj;
}
else if(ns4) {
this.obj = document.layers[id];
this.obj.left = left;
return this.obj;
   }
}
function layerSetup() {
floatLyr = new layerObject('floatLayer', pageWidth * .5);
window.setInterval("main()", 10)
}
function floatObject() {
if (ns4 || ns6) {
findHt = window.innerHeight;
} else if(ie4) {
findHt = document.body.clientHeight;
   }
} 
function main() {
if (ns4) {
this.currentY = document.layers["floatLayer"].top;
this.scrollTop = window.pageYOffset;
mainTrigger();
}
else if(ns6) {
this.currentY = parseInt(document.getElementById('floatLayer').style.top);
this.scrollTop = scrollY;
mainTrigger();
} else if(ie4) {
this.currentY = floatLayer.style.pixelTop;
this.scrollTop = document.body.scrollTop;
mainTrigger();
   }
}
function mainTrigger() {
var newTargetY = this.scrollTop + this.topMargin;
if ( this.currentY != newTargetY ) {
if ( newTargetY != this.targetY ) {
this.targetY = newTargetY;
floatStart();
}
animator();
   }
}
function floatStart() {
var now = new Date();
this.A = this.targetY - this.currentY;
this.B = Math.PI / ( 2 * this.slideTime );
this.C = now.getTime();
if (Math.abs(this.A) > this.findHt) {
this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt;
this.A = this.A > 0 ? this.findHt : -this.findHt;
}
else {
this.D = this.currentY;
   }
}
function animator() {
var now = new Date();
var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D;
newY = Math.round(newY);
if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
if ( ie4 )document.all.floatLayer.style.pixelTop = newY;
if ( ns4 )document.layers["floatLayer"].top = newY;
if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px";
   }
}
function start() {
if(ns6||ns4) {
pageWidth = innerWidth;
pageHeight = innerHeight;
layerSetup();
floatObject();
}
else if(ie4) {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
layerSetup();
floatObject();
   }
}
//  End -->
</script>
</HEAD>
<BODY onLoad="start()">
<DIV id="floatLayer" style="position: absolute; height:200px; width:200px; left:20px; background-color: #7D92A9">This is a Floating Div </DIV>
<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>sv

#6

<img src="http://expert.csdn.net/images/csdn.gif" border=0 style="position: absolute;
  top:expression(document.body.scrollTop + document.body.clientHeight - this.clientHeight);
  left:expression(document.body.scrollLeft + document.body.clientWidth - this.clientWidth);">
<div style="width: 2000; height: 2000"></div>

#7

我怎么试了好几个让层悬浮不动的代码都不行啊？为什么？

#8

难道我的也不行？？？？

#9

难道我的也不行？？？？
-----------------------

看到有人发贴子说，expression放在style里使用很不合理，

因为expression相当于setInterval，循环判断，很浪费资源......

#10

除了用setInterval、setTimeout、expression，没其他办法

#11

<html>
<head>
<title> 固定层 </title>
<script type="text/javascript">
is = {};
is.ua = window.navigator.userAgent;
is.dom = document.getElementById ? 1:0; //DOM
is.ie = is.ua.match(/msie/i) ? 1:0; //IE
is.moz = is.ua.match(/gecko/i) ? 1:0; //MOZILLA
is.ns = !is.ie&&!is.dom&&!is.moz //NS
function heartBeat(objname) {
var diffY;
if (is.ie) {
diffY=document.body.scrollTop;
}
else{
diffY=window.pageYOffset;
}
setheartbeat(objname,diffY);
}
function setheartbeat(objId,m) {
if (is.ie) {
document.all[objId].style.pixelTop=m;
}
else if(is.ns) {
document.layers[objId].style.top = m;
}
else if(is.moz) {
document.getElementById(objId).style.top = m;
}
}
window.setInterval("heartBeat('fff')",1);
</script>
</head>
<body>
注意关闭Maxthon等浏览器的广告屏蔽功能
<div id="fff" style="right:16px;POSITION:absolute;TOP:1px;width:50px;height:50px;background-color:#f00;"></div>
<div style="height:2000px;"></div><!-- 撑大窗口 -->
</body>
</html>

#12

固定div，scroll时不闪动：
http://jkisjk.vip.sina.com/html/DivFixedInBody2.htm

固定div，scroll时闪动：
http://jkisjk.vip.sina.com/html/DivFixedInBody1.htm

#13

回复人： wxylvmnn(城隍庙三当家的) ( ) 信誉：99  2005-07-12 08:53:00  得分: 0  
。。。
看到有人发贴子说，expression放在style里使用很不合理，
因为expression相当于setInterval，循环判断，很浪费资源......
  
－－－－－
expression果然是个比较耗能的东东,在鼠标移动在影响expression结果的对象上时，就相当于setInterval不停的跑。
 

#14

JK_10000(JK) ( ,谢谢，那两个代码又小又好用，太谢谢了。

不过，本来也是不能用的，我用的是DW。我把那个代码复制过来，贴在DW中的空白HTML页中，还不行。我试着把DW自带的头两行代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
删掉后就好了，为什么？

#15

xinyunyishui(心云意水)，你好，你的那个停在右下角，怎样改变位置？谢谢。

#1

<div>ok</div>

#2

默认的就固定在一个位置的。
楼上的就是。。

#3

晕死.........

#4

楼主的意思是要悬浮的层。

#5

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
window.onerror = null;
var topMargin = 150;
var slideTime = 3000;
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
function layerObject(id,left) {
if (ns6) {
this.obj = document.getElementById(id).style;
this.obj.left = left;
return this.obj;
}
else if(ie4) {
this.obj = document.all[id].style;
this.obj.left = left;
return this.obj;
}
else if(ns4) {
this.obj = document.layers[id];
this.obj.left = left;
return this.obj;
   }
}
function layerSetup() {
floatLyr = new layerObject('floatLayer', pageWidth * .5);
window.setInterval("main()", 10)
}
function floatObject() {
if (ns4 || ns6) {
findHt = window.innerHeight;
} else if(ie4) {
findHt = document.body.clientHeight;
   }
} 
function main() {
if (ns4) {
this.currentY = document.layers["floatLayer"].top;
this.scrollTop = window.pageYOffset;
mainTrigger();
}
else if(ns6) {
this.currentY = parseInt(document.getElementById('floatLayer').style.top);
this.scrollTop = scrollY;
mainTrigger();
} else if(ie4) {
this.currentY = floatLayer.style.pixelTop;
this.scrollTop = document.body.scrollTop;
mainTrigger();
   }
}
function mainTrigger() {
var newTargetY = this.scrollTop + this.topMargin;
if ( this.currentY != newTargetY ) {
if ( newTargetY != this.targetY ) {
this.targetY = newTargetY;
floatStart();
}
animator();
   }
}
function floatStart() {
var now = new Date();
this.A = this.targetY - this.currentY;
this.B = Math.PI / ( 2 * this.slideTime );
this.C = now.getTime();
if (Math.abs(this.A) > this.findHt) {
this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt;
this.A = this.A > 0 ? this.findHt : -this.findHt;
}
else {
this.D = this.currentY;
   }
}
function animator() {
var now = new Date();
var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D;
newY = Math.round(newY);
if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
if ( ie4 )document.all.floatLayer.style.pixelTop = newY;
if ( ns4 )document.layers["floatLayer"].top = newY;
if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px";
   }
}
function start() {
if(ns6||ns4) {
pageWidth = innerWidth;
pageHeight = innerHeight;
layerSetup();
floatObject();
}
else if(ie4) {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
layerSetup();
floatObject();
   }
}
//  End -->
</script>
</HEAD>
<BODY onLoad="start()">
<DIV id="floatLayer" style="position: absolute; height:200px; width:200px; left:20px; background-color: #7D92A9">This is a Floating Div </DIV>
<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>s<p>sv

#6

<img src="http://expert.csdn.net/images/csdn.gif" border=0 style="position: absolute;
  top:expression(document.body.scrollTop + document.body.clientHeight - this.clientHeight);
  left:expression(document.body.scrollLeft + document.body.clientWidth - this.clientWidth);">
<div style="width: 2000; height: 2000"></div>

#7

我怎么试了好几个让层悬浮不动的代码都不行啊？为什么？

#8

难道我的也不行？？？？

#9

难道我的也不行？？？？
-----------------------

看到有人发贴子说，expression放在style里使用很不合理，

因为expression相当于setInterval，循环判断，很浪费资源......

#10

除了用setInterval、setTimeout、expression，没其他办法

#11

<html>
<head>
<title> 固定层 </title>
<script type="text/javascript">
is = {};
is.ua = window.navigator.userAgent;
is.dom = document.getElementById ? 1:0; //DOM
is.ie = is.ua.match(/msie/i) ? 1:0; //IE
is.moz = is.ua.match(/gecko/i) ? 1:0; //MOZILLA
is.ns = !is.ie&&!is.dom&&!is.moz //NS
function heartBeat(objname) {
var diffY;
if (is.ie) {
diffY=document.body.scrollTop;
}
else{
diffY=window.pageYOffset;
}
setheartbeat(objname,diffY);
}
function setheartbeat(objId,m) {
if (is.ie) {
document.all[objId].style.pixelTop=m;
}
else if(is.ns) {
document.layers[objId].style.top = m;
}
else if(is.moz) {
document.getElementById(objId).style.top = m;
}
}
window.setInterval("heartBeat('fff')",1);
</script>
</head>
<body>
注意关闭Maxthon等浏览器的广告屏蔽功能
<div id="fff" style="right:16px;POSITION:absolute;TOP:1px;width:50px;height:50px;background-color:#f00;"></div>
<div style="height:2000px;"></div><!-- 撑大窗口 -->
</body>
</html>

#12

固定div，scroll时不闪动：
http://jkisjk.vip.sina.com/html/DivFixedInBody2.htm

固定div，scroll时闪动：
http://jkisjk.vip.sina.com/html/DivFixedInBody1.htm

#13

回复人： wxylvmnn(城隍庙三当家的) ( ) 信誉：99  2005-07-12 08:53:00  得分: 0  
。。。
看到有人发贴子说，expression放在style里使用很不合理，
因为expression相当于setInterval，循环判断，很浪费资源......
  
－－－－－
expression果然是个比较耗能的东东,在鼠标移动在影响expression结果的对象上时，就相当于setInterval不停的跑。
 

#14

JK_10000(JK) ( ,谢谢，那两个代码又小又好用，太谢谢了。

不过，本来也是不能用的，我用的是DW。我把那个代码复制过来，贴在DW中的空白HTML页中，还不行。我试着把DW自带的头两行代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
删掉后就好了，为什么？

#15

xinyunyishui(心云意水)，你好，你的那个停在右下角，怎样改变位置？谢谢。
标签：

相关文章