今天是

爱酷家


当前位置:首页 > 资源收藏 > 特效代码

漂浮层定位缓冲特效

收集整理   发布时间:2013-05-05 20:54:00   阅读

漂浮层定位缓冲特效

页面有个漂浮层。本身是一直在页面最底部的。

当这个漂浮层距离底部200PX的时候就不动了,这个要怎么做呢?

代码如下:

代码:
<!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" />
<style type="text/css">
#f{width:200px; height:200px; background:#099; position:absolute; right:0;}
#wrapper{height:2000px; background:#CCC}
</style>

<div id="wrapper"></div>
<div id="f">	
</div>
<script type="text/javascript">
var pageHeight = window.innerHeight;

if (typeof pageWidth != "number"){
	if (document.compatMode == "CSS1Compat"){
		pageHeight = document.documentElement.clientHeight;
	} else {
		pageHeight = document.body.clientHeight;
	}
} 

var f = document.getElementById("f");
var w = document.getElementById("wrapper");
var ft = pageHeight-f.clientHeight +document.documentElement.scrollTop;
f.style.top = ft+"px";
window.onscroll = function(){
	if (pageHeight+document.documentElement.scrollTop <= document.documentElement.scrollHeight-200){
		ft = pageHeight-f.clientHeight +document.documentElement.scrollTop;
		f.style.top = ft+"px";
	}else{
		f.style.top = (document.documentElement.scrollHeight-f.clientHeight-200)+"px";
	}
}
</script>
</body>
</html>



注:⊙如转载本站原创作品,请务必包保留本文地址:

内容: