js实现侧栏浮动效果
要求：
用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>