右侧浮动导航

标签：style   io   os   ar   sp   div   art   cti   on   

<div id="float" class="float">

 <a>1</a>

 <a>2</a>

</div>

<style>

.float{width:168px;height:294px;position:absolute;top:180px;left:254px;z-index:100;padding-top:32px;}

</style>

 <script>

(function(){

var $ = function (id){return typeof(id) == ‘string‘ ? document.getElementById(id) : id;}

function getPos(eleStr){

var e = $(eleStr), t=e.offsetTop, l=e.offsetLeft;

while(e=e.offsetParent){

t+=e.offsetTop;

l+=e.offsetLeft;

}

return {‘t‘:t,‘l‘:l}

}

/*窗口右边浮动条*/

var top = getPos(‘float‘).t;

function barInit(barStr, wrapW, marginLeft){

var bar = $(barStr),

cW = document.documentElement.clientWidth || document.body.clientWidth,

cH = document.documentElement.clientHeight || document.body.clientHeight,

sT = document.documentElement.scrollTop || document.body.scrollTop,

barW = bar.offsetWidth,

barH = bar.offsetHeight,

barTop,

barLeft;

barTop = 0.5*(cH - barH) + sT - top;

if(barTop < 300) barTop = 300;

if(barTop > 20000) barTop = 20000;

if((cW - wrapW) >= (barW + marginLeft) * 2){

barLeft = (cW + wrapW)*0.5 + marginLeft;

}else if(cW <= wrapW){

barLeft = wrapW - barW;

}else{

barLeft = cW - barW;

}

if(barLeft<wrapW){

barLeft = wrapW;

}

bar.style.cssText = ‘position:absolute;top:‘ + barTop + ‘px;left:‘ + barLeft + ‘px;z-index:999;‘

barScroll(bar);

}

function barScroll(bar){

var cH = document.documentElement.clientHeight || document.body.clientHeight,

barH = bar.offsetHeight,

sT = document.body.scrollTop || document.documentElement.scrollTop,

boxY = parseInt(bar.style.top);

var boxFinal, y1, timer;

if(timer) clearTimeout(timer);

boxFinal = 0.8*(cH - barH) + sT - top;

if(boxFinal < 300) boxFinal = 300;

if(boxFinal > 20000) boxFinal = 20000;

y1 = Math.ceil((boxFinal - boxY)/20);

if(y1 == 0){

timer = setTimeout(function(){barScroll(bar)}, 200)

}else{

bar.style.top = boxY + y1 + ‘px‘;

timer = setTimeout(function(){barScroll(bar)}, 20);

}

}

window.onresize = function(){

barInit(‘float‘, 844, 70);

}

window.onload = function(){

barInit(‘float‘, 1000,2);

}

})() 

</script>

右侧浮动导航

标签：style   io   os   ar   sp   div   art   cti   on   

原文地址：http://my.oschina.net/glelaine/blog/318689