标签：
html代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>侧边栏停靠</title>
<link href="css/Index.css" rel="stylesheet" />
<script src="js/jquery-1.4.1.min.js"></script>
<script src="js/Index.js"></script>
</head>
<body>
<div class="all">
<div class="top" id="top"></div>
<div class="middle">
<div class="middle-left" id="middle-left"></div>
<div class="middle-right" id="middle-right"></div>
</div>
<div style="clear: both;"></div>
<div class="bottom"></div>
</div>
</body>
</html>
css代码:
* {
margin: 0px;
padding: 0px;
}
.all {
width: 1000px;
margin: 0px auto;
}
.top {
height: 300px;
border: 1px solid #ccc;
}
.middle {
position: relative;
}
.middle-left {
width: 30%;
height: 600px;
border: 1px solid red;
float: left;
margin: 30px 0px 0px 0px;
}
.middle-right {
float: right;
width: 69%;
height: 2000px;
border: 1px solid #ccc;
margin: 30px 0px 0px 0px;
}
.bottom {
height: 400px;
border: 1px solid #ccc;
margin: 30px 0px 0px 0px;
}
js代码:
//第一种:js
window.onload = function () {
window.onscroll = function () {
//获取顶端的高度(包括边框)
var top_height = document.getElementById("top").offsetHeight;
//获取左侧边栏的高度(包括边框)
var middle_left_height = document.getElementById("middle-left").offsetHeight;
//获取右侧滚动栏的高度(包括边框)
var middle_right_height = document.getElementById("middle-right").offsetHeight;
//获取滚动条高度
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollHeight <= top_height + 30) {
document.getElementById("middle-left").style.position = "absolute";
document.getElementById("middle-left").style.top = 0 + "px";
} else if (scrollHeight > top_height + 30 && scrollHeight < middle_right_height - middle_left_height + top_height + 30) {
document.getElementById("middle-left").style.position = "absolute";
document.getElementById("middle-left").style.top = scrollHeight - top_height - 30 + "px";
} else if (scrollHeight >= middle_right_height - middle_left_height + top_height + 30) {
document.getElementById("middle-left").style.position = "absolute";
document.getElementById("middle-left").style.top = middle_right_height - middle_left_height - 100 + "px";
}
}
}
//第二种:jQuery
//需要引用Jquery库
/// <reference path="jquery-1.4.1-vsdoc.js" />
//$(function () {
// var top_height = $("#top").height();
// var middle_left_height = $("#middle-left").height();
// var middle_right_height = $("#middle-right").height();
// $(window).scroll(function () {
// var scrollHeight = $(window).scrollTop();
// if (scrollHeight <= top_height + 30) {
// $("#middle-left").css({ position: "absolute", top: "0px" });
// } else if (scrollHeight > top_height + 30 && scrollHeight < middle_right_height - middle_left_height + top_height + 30) {
// $("#middle-left").css({ position: "absolute", top: scrollHeight - top_height - 30 + "px" });
// } else if (scrollHeight >= middle_right_height - middle_left_height + top_height + 30) {
// $("#middle-left").css({ position: "absolute", top: middle_right_height - middle_left_height - 100 + "px" });
// }
// });
//})
标签：
原文地址：http://www.cnblogs.com/lingchuang/p/4469926.html
