两种常见的页面元素fixed/滑动效果。

两种常见的页面元素fixed/滑动效果。
作者：Neoxone 发表时间： 2010年05月21号，星期五阅读：11,150 次

第一个效果，国外网站用的挺多的。是种不错的用户体验设计。
元素在窗口移到某高度后开始有fixed效果。

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
*{padding:0;margin:0;}
html{height:100%}
body{height:200%}
.top{height:100px;background:#ccc;}
.fix{width:100px;height:100px;background:#999;}
</style>
</head>
<body>
	<div class="top">header</div>
	<div class="fix" id="fix">滚动窗口到某高度是此元素表现fixed效果</div>
</body>
<script type="text/javascript">
var $id=function(id){
	return (document.getElementById(id)) || id;
 }
var tip = function(space){	   // 离窗口上方多少值时，开始fixed
	var ie6 = /msie 6/i.test(navigator.userAgent);
	var fix= $id('fix');
	var top= fix.offsetTop;
	var fixed = function(){
			var pos = document.documentElement.scrollTop + document.body.scrollTop;
			if(pos+space >= top){
				ie6 ?
				void(fix.style.position = "absolute") + void(fix.style.top=pos+space+"px") :
				void(fix.style.position = "fixed") + void(fix.style.top = space + "px");
			}
			else{
				ie6 ?
				void(fix.style.position ="") + void(fix.style.top=top+"px") :
				void(fix.style.position ="") + void(fix.style.top=top+"px");
			}
	};
	 return fixed;
};
window.onscroll = tip(20);
</script>
</html>

众所周知，ie6不支持fixed属性。所以对其是特殊设置，拖动时会有抖动。
注意一下这里：var pos = document.documentElement.scrollTop + document.body.scrollTop;
这是兼容webkit的写法。webkit内核的浏览器下，document.documentElement.scrollTop值始终为0，document.body.scrollTop才有其意。而其他浏览器恰恰想反。

这里的方法只针对了单个元素。如果要应用到多个元素中（实际应用中不太常见吧），还要费些周折。
需要在绑定的方法tip上使用对象作为参数进行传递，对象则对应各个要fixed的元素。

第二种效果，国内用的比较多。特别是以前，一般都是做铺天盖地的浮动广告的。当然，这错不在方法，呵呵。

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
	*{padding:0;margin:0;}
	html{height:100%;}
	body{height:200%;}
	.box{position:absolute;width:100px;height:100px;background:#ccc}
</style>
</head>
<body>
	<div class="box" id="box1" style="bottom:0;left:0;">底部</div>
</body>
<script type="text/javascript">
var $id=function(id){
	return (document.getElementById(id)) || id;
}
var locked=false;
var scroll=function (o){
	var space=$id(o).offsetTop;
	$id(o).style.top=space+'px';  /* 初始化top值 */
	var fixed = function(){
			if(locked) return;
			locked=true;
			var roll=setInterval(function(){
				var height =document.documentElement.scrollTop+document.body.scrollTop+space; //这两个scrollTop在chrome下有特殊。但二者必有一为0；
				var top = parseInt($id(o).style.top);
				if(height!= top){
					goTo = height-parseInt((height - top)*0.9);	   /* 一个简单的缓动算法 */
					$id(o).style.top=goTo+'px';
				}
				else{
					if(roll) clearInterval(roll);
					locked=false;
				}
			},50);
	}
	return fixed;
}
window.onscroll=scroll('box1');
</script>
</html>

同样，这里只绑定了一个元素。而这种效果常常是要多个元素一起“飘”的，除了上面一样可以传对象外。
还有个方案：就是无限调用，而不是将方法绑定在window.onscroll 上。
即如下:

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
	*{padding:0;margin:0;}
	html{height:100%;}
	body{height:200%;}
	.box{position:absolute;width:100px;height:100px;background:#ccc}
</style>
</head>
<body>
	<div class="box" id="box1" style="bottom:0;left:0;">底部</div>
	<div class="box" id="box2" style="top:0;right:0;">顶部</div>
</body>
<script type="text/javascript">
var id=function(o){return document.getElementById(o)}
var scroll=function (o){
	var space=id(o).offsetTop;
	id(o).style.top=space+'px';
	void function(){
			var goTo = 0;
			var roll=setInterval(function(){
				var height =document.documentElement.scrollTop+document.body.scrollTop+space;
				var top = parseInt(id(o).style.top);
				if(height!= top){
					goTo = height-parseInt((height - top)*0.9);
					id(o).style.top=goTo+'px';
				}
				//else{if(roll) clearInterval(roll);}	 //这里就不应清除循环调用了。
			},50);
	}()
}
scroll('box1');
scroll('box2');
</script>
</html>

这个方案很常用，简单好用。只是效率上可能会被人说道。

标签： fixed, 滑动效果