求问：js侧边栏浮动固定，为什么我的不动，我找教程写的，真心不明白。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<style type="text/css">
.box {
width: 100%;
height: 2000px;
border: 2px solid teal;
}
.header {
border: 2px solid #eee;
width: 100%;
height: 100px;
margin-bottom: 10px;
}
.insidar {
width: 20%;
height: 300px;
border: 2px solid #eee;
float: left;
}
.content {
width: 78%;
height: 1800px;
border: 2px solid #eee;
margin-right: 10px;
float: right;
}
.footer {
width: 100%;
height: 50px;
border: 1px solid #eee;
position: absolute;
top:1950px;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script type="text/javascript">
var getID=function(id){
return document.getElementById(id);
}
var addEvent = function(obj,event,fun){
if (obj.addEventListener) {
obj.addEventListener(event,fun,false);
}else if(obj.addEventListener()){
obj.attachEvent("on"+event,fun)
}
}
var insidarx = getID("insidar");
addEvent(window,"scroll",function(){
var scrollHeight = document.body.scrollTop;
var contentHeight = getID("content").offsetHeight-insidarx.offsetHeight;
if (scrollHeight>100 && scrollHeight<contentHeight+100) {
insidarx.style.position = "absolute";
insidarx.style.left = "0px";
insidarx.style.top = scrollHeight-100+"px";
}
else if (scrollHeight<=100) {
insidar.style.position= "absolute";
insidar.style.left = "0px";
insidar.style.top = "0px";
}
});
</script>
</body>
</html>
aladdinx1回答
-
你你你你说什么
浮动固定是指一直在窗口的固定位置吗，像慕课网右边的回答提问这一栏吗？
随时随地看视频慕课网APP
相关分类
JavaScript