关于各类浮动的侧边栏小广告的实现.
纯css的方式实现:主要在于position属性中的fixed,固定侧边,在设置方位后,就能始终处于页面左侧或者右侧.这是最简便的实现方式.但是又一个兼容性的问题,就是在ie6下是无法设置的.所以需要一些额外
.fixed{
position:fixed;
clip:rect(0 100% 100% 0);
_position:absolute;
/* 底部 */
bottom:0px;
left:0px;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
/*_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);*/
/* 左侧 */
/*left:0px;*/
/*_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);*/
/*_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);*/
}
/* 解决固定层在IE6下闪的问题 */
*html{
background-image:url(about:blank);
background-attachment:fixed;
}
具体位置可以进行改动.不过fixed的固定有一个不足之处,就是交互性很差,太过于死板,降低了用户对于网站的体验.
现在网上常见的浮动窗口,在用户下拉屏幕时,有个滑动的动作效果,显得不那么僵硬.对于此类实现主要是多添加一个一个定时器效果即可
setTimeout(function move(){
object.style.top=scrollTop+t+"px";//t为你需要他在屏幕中的位置,最好选择可见高度适配document.documentElement.clientHeight,这样可以时用户在拉伸页面时,窗口自动适配
},400);
ps:window.onresize=window.onload=window.onscroll
同时，可以根据此在页面右下角处设置一个回到顶部的button。只要多附加一个向上运动的计时器，在点击时触发。
object.onclick=function(){
var timer=null;
timer=setInterval(function moveTop(){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var iSpeed=Math.floor(-scrollTop/8);//设置回到顶部速度大小
//关闭计时器
if(scrollTop==0){
clearInterval(timer);
}
document.body.scrollTop=document.documentElement.scrollTop=scrollTop+iSpeed;
},40);
}
同时要注意如果在计时器还没完全执行完毕时，拉动滚动条，将出现一个无限上拉的小bug，这时候就需要加一个设定，判定是系统移动还是用户移动了。在全局中申明一个bSystem变量，初始赋值为true，表明是系统拖拽，如果是人为事件，则在window.onscroll中使其变为false，并且停止计时器。如果系统拖拽，则在onload中改为ture。通过判定其值来决定滚动状态。
