[Javascript][Mootools]跟随页面滚动的浮动层

这个东西经常用来做为浮动广告，不过也可以做成一个浮动的菜单条，有利于浏览者快速跳转。

跟随页面滚动的原理是，将浮动层的定位坐标“top”值设置为页面的滚动高度即可。

通过可选参数来设定动画移动的值，以及浮动元素离顶端的距离。还提供了一个属性isActive来设定是否跟随滚动，一个方法toggleActive来开关跟随效果。

跟随页面滚动的浮动层

 1 /**
 2  * FloatDiv
 3  * @classDescription create a float Div scrolling with the browser window.
 4  * @dependence Mootools (http://www.mootools.net)
 5  * @author Aken.li (http://www.kxbd.com)
 6  * @version 1.0
 7  * @created   2009-01-25
 8  */
 9 var FloatDiv = new Class({
     Implements:Options,
 
     options:{
         y:0,//到文档视图顶端的距离
         interval:0.01,//时长，单位为秒
         step:0.1//步长，数字越小，动画越慢，为1时无缓动动画
     },
     
     initialize:function(id,options){
         this.setOptions(options);
         this.obj = $(id);
         this.isActive = true;
         this.scrollFunc.periodical(this.options.interval*1000,this);
     },
 
     scrollFunc:function(){
         if(this.isActive){
             var posNow = parseInt(this.obj.getStyle('top'));
             var offset = (window.getScroll().y+this.options.y-posNow)*this.options.step;
             offset = offset > 0 ? Math.ceil(offset) : Math.floor(offset);
             this.obj.setStyle('top',posNow+offset);
         }
     },
 
     toggleActive:function(){
         this.isActive = this.isActive ? false:true;
     }
 });