js兑现侧栏浮动效果
js实现侧栏浮动效果
要求:
用js实现一个简单的侧栏浮动的效果。即当页面向下拉时,侧栏仍然停留在原来的位置。
原理和步骤:
1.通过CSS布局实现2个(左右侧各一个)边栏,可以用div实现(可以设置其停留在页面两侧的位置)。
2.获得页面向下(上)滚动时,滚动条离页面顶端的距离,即滚动条向下滚动的距离(scrollTop),假定为h。
3.将边栏也随之向下移动相应的距离(h)。可以通过top值加上h实现。
代码如下:
要求:
用js实现一个简单的侧栏浮动的效果。即当页面向下拉时,侧栏仍然停留在原来的位置。
原理和步骤:
1.通过CSS布局实现2个(左右侧各一个)边栏,可以用div实现(可以设置其停留在页面两侧的位置)。
2.获得页面向下(上)滚动时,滚动条离页面顶端的距离,即滚动条向下滚动的距离(scrollTop),假定为h。
3.将边栏也随之向下移动相应的距离(h)。可以通过top值加上h实现。
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript"> function initDiv(){ moveLeftDiv(); moveRightDiv(); } //获得滚动条滚动的像素 function getBodyScrollHeight(){ if(window.innerHeight){ return window.pageYOffset; } else if(document.documentElement&&document.documentElement.scrollTop){ return document.documentElement.scrollTop; } else if(document.body){ return document.body.scrollTop; } } //移动左栏 function moveLeftDiv(){ var el = document.getElementById("left"); //得到滚动条滚动的距离 var pos= getBodyScrollHeight(); var y = 100; //将左栏向下移动pos个像素 el.style.top=(y+pos)+"px"; //10ms后移动 setTimeout("moveLeftDiv();",10); } //移动右栏 function moveRightDiv(){ var el = document.getElementById("right"); //得到滚动条滚动的距离 var pos= getBodyScrollHeight(); var y = 100; //将右栏向下移动pos个像素 el.style.top=(y+pos)+"px"; //10ms后移动 setTimeout("moveRightDiv();",10); } </script> </head> <body onload = "initDiv();"> <div id = "left" style="position:absolute;z-index:999;border:1px solid red;width:100px;height:300px;top:100px;left:20px"> </div> <div id="center" style="margin:0 200px;height:8000px;background:#ccc;"> <a>124</a> </div> <div id="right" style="position:absolute;z-index:999;border:1px solid red;width:100px;height:300px;top:100px;right:20px"> </div> </body> </html>