首页 > 代码库 > 右侧浮动导航
右侧浮动导航
<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>
右侧浮动导航