具体可以用下面代码看效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
<meta name="author" content="苏七的小情绪">
<title></title>
<style>
.top {
width: 100%;
height: 500px;
background-color: lightblue;
}
.scroll {
position: relative;
}
.con {
height: 300px;
background-color: lightgrey;
}
.move {
position: absolute;
bottom: 0;
right: 100px;
width: 100px;
height: 100px;
background-color: lightcoral;
}
.bottom {
height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="scroll">
<div class="con"></div>
<div class="move"></div>
</div>
<div class="bottom"></div>
</body>
</html>
<script>
// 1400是top+scroll的总高度，我们设定scroll的最大高度为900，所以这里500+900
// 500是scroll上面内容的高度
function a(){
var div = document.querySelector('.scroll')
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var h = document.documentElement.clientHeight || document.body.clientHeight;
var height = 1400 - h;
setTimeout(function () {
if (scrollTop < height) {
console.log(h,scrollTop);
div.style.height= (h - 500 + scrollTop) + 'px';
} else {
div.style.height= '900px';
}
}, 50)
};
a();
window.addEventListener('scroll', function () {
a()
});
</script>
527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
