js兑现侧栏浮动效果
日期：2014-05-16 浏览次数：20466 次
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
