<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style>
#top_head {
width: 100%;
height: 253px;
background: gray;
} #middle_right_list {
width: 70%;
height: 1800px;
background: #0000FF;
float: left;
} #middle_left {
width: 30%;
height: 300px;
float: left;
} #middle_left_list {
width: 100%;
height: 300px;
background: #003580;
background-image: url(../../CS/布局属性全接触/img/1.jpg);
/*transition: top .03s ease-in;*/
} #middle_content {
position: relative;
} #middle_content:after {
content: '';
display: block;
clear: both;
overflow: hidden;
} #foot {
width: 100%;
height: 200px;
background: #004099;
}
body,html{
padding: 0;
margin: 0;
}
</style>
<script>
function getByID(idname) {
var ob = document.getElementById(idname);
return ob;
}
window.addEventListener('scroll', function() {
//获取滚动高度
var scrolHight = document.body.scrollTop;
var middle_left = getByID('middle_left_list');
var contentHeight = getByID('middle_right_list').offsetHeight - middle_left.offsetHeight;
console.log(contentHeight);
if (scrolHight > 253 && scrolHight < (contentHeight + 253)) {
//改变CSS
middle_left.style.position = 'absolute';
middle_left.style.top = (scrolHight - 253) + 'px';
middle_left.style.left = '0px';
middle_left.style.width = '30%'; } else if (scrolHight <= 253) {
middle_left.style.position = 'static';
middle_left.style.width = '100%';
}
}) // window.onscroll = function() {
//
// }
</script>
</head> <body>
<div class="container">
<div id="top_head">头部</div>
<div id="middle_content">
<div id="middle_left">
<div id="middle_left_list">左菜单</div>
</div>
<div id="middle_right_list">课程列表</div>
</div>
<div id="foot">底部</div>
</div>
</body> </html>
jQuery实现:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style>
#top_head {
width: 100%;
height: 253px;
background: gray;
} #middle_right_list {
width: 70%;
height: 1800px;
background: #0000FF;
float: left;
} #middle_left {
width: 30%;
height: 300px;
float: left;
} #middle_left_list {
width: 100%;
height: 300px;
background: #003580;
background-image: url(../../CS/布局属性全接触/img/1.jpg);
/*transition: top .03s ease-in;*/
} #middle_content {
position: relative;
} #middle_content:after {
content: '';
display: block;
clear: both;
overflow: hidden;
} #foot {
width: 100%;
height: 200px;
background: #004099;
} body,
html {
padding: 0;
margin: 0;
}
</style>
<script src="../jquery-2.2.4.min.js"></script>
<script>
$(window).scroll(function() {
var scrollHeight = $(window).scrollTop();
var topHeight = $('#top_head').height();
var slideHeight = $('#middle_left').height();
var contentHeight = $('#middle_content').height() - slideHeight;
console.log(scrollHeight);
console.log('max:'+ (contentHeight + topHeight));
if(scrollHeight > contentHeight + topHeight) {
scrollHeight = contentHeight + topHeight;
}
if (scrollHeight > topHeight && scrollHeight <= contentHeight + topHeight) {
$('#middle_left_list').css({
"position": "absolute",
"top": scrollHeight - topHeight + 'px',
"left": 0,
"width": '30%'
});
} else if (scrollHeight <= topHeight) {
$('#middle_left_list').css({
"position": "absolute",
"top": 0,
"left": 0,
"width": '30%'
}); }
})
</script>
</head> <body>
<div class="container">
<div id="top_head">头部</div>
<div id="middle_content">
<div id="middle_left">
<div id="middle_left_list">左菜单</div>
</div>
<div id="middle_right_list">课程列表</div>
</div>
<div id="foot">底部</div>
</div>
</body> </html>