对于此技术,又做了新的大幅改进,并对不同浏览器(特别是最新的FireFox3)效果进行了分析,参见文章智能不随滑动条移动的网页层的改进与FireFox3

用过WordPress的K2模板最近版本的人应当都对它那“高级导航条”记忆犹新,除却一些Ajax的高级导航功能外,这导航栏可以固定在屏幕最上方而不随滑动条移动,但是不会超过content而覆盖header。

在一个韩国网站http://www.ggw.or.kr/(yskin查到它是韩国某个地方的妇女交流组织~~),除了主页外的大多数页面的右边都有一个可以浮动的“工具条”,它的特点也是可以固定在页面旁边而不随滑动条移动,同时如果浏览最上面的时候也不会超出范围。

似乎国内也有人用了相应的技术,但是主要还是只实现固定在页面一个位置(多数的用途是显示广告~),这一点本来可以通过对div对象的position定义为fixed来轻松实现,但是遗憾的是IE6对此不支持(K2模板的高级导航栏的滑动功能也会在IE6里失效)。

查询了一下,这种效果在韩国的网站中很常见,也大多是一种模式来实现(代码其实都差不多)。但是在国内似乎还没有相应的介绍。

hyeonseok.com的SmoothMovingLayer里给了相应的代码。不过还需要做一些修改才能让它运行起来更适合作为侧边工具栏。首先我把它一些并不是很需要的设置去掉,然后简化为只对上距离Top进行处理(如果需要,可以同理添加判断左距离Left的处理)。此外,根据实际使用时可能一次性拖动较长距离的情况,这里又加入了一个自动判断的跨越式跳转,具体内容见后文说明。

其javascript部分如下:

function initMoving(target, initTop, topLimit) {
	if (!target)
		return false;   
   	var obj = target;
	obj.initTop = initTop;
	obj.topLimit = topLimit;
	obj.style.position = "absolute";
	obj.top = obj.initTop;   
   	obj.getTop = function() {
		if (typeof(document.documentElement.scrollTop) == "number") {
			return document.documentElement.scrollTop;
		} else if (typeof(window.pageYOffset) == "number") {
			return window.pageYOffset;
		} else {
			return 0;
		}
	}
   	obj.move = setInterval(function() {
		pos = obj.getTop() + topLimit;
		if(pos < obj.initTop)
			pos = obj.initTop;
		interval = obj.top - pos;
		if (interval > 1000) {
			obj.top = pos + 700;
		} else if (interval < -1000) {
			obj.top = pos - 700;
		} else  {
			obj.top = obj.top - interval / 3;
		}
		obj.style.top = obj.top + "px";
	}, 30)
}

可以在给这段代码加上一个


的外框,然后放入页面的head部分。或者单独作为一个js文件,再用下面代码来加入到head部分。

调用的时候,一般是使用类似如下的代码事例: