固定边栏滚动特效
2018-03-30 本文已影响5人
爱忽悠的唐唐在晃悠
知识点
- 用fixed布局
- 当滚动高度+屏幕高度>边栏高度时，边栏改变top值。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<style type="text/css">
.left-area{
height:2500px;
background:black;
float:left;
width:65%;
}
.child1{
background: gray;
height:60%
}
.child2{
background: goldenrod;
height:40%;
}
.fix-area{
height:2000px;
background: red;
left: 65%;
top:0;
width:35%;
position:fixed;
}
</style>
</head>
<body>
<div class="left-area clear">
<div class="child1"></div>
<div class="child2"></div>
</div>
<div class="fix-area" id="side">
<div class="child2"></div>
<div class="child1"></div>
</div>
<script type="text/javascript">
var addEvent = function(obj,event,fn){
if(obj.addEventListener){
obj.addEventListener(event,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+event,fn);
}
}
addEvent(window,'scroll',function(){
var sideE= document.getElementById("side")
var sideHeight =sideE.offsetHeight;
var scrollHeight = document.documentElement.scrollTop||document.body.scrollTop;
var screenHeight =document.documentElement.clientHeight||document.body.clientHeight;
if(screenHeight+scrollHeight>sideHeight){
sideE.style.top= -(screenHeight+scrollHeight-sideHeight)+'px';
}
})
</script>
</body>
</html>
