<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>右下角悬浮框案列</title>
<style>
body{
height: 2000px;
}
#div1{
200px;
height: 150px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
</style>
<script>
window.onscroll =function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop)
var oDiv =document.getElementById('div1');
//oDiv.offsetHeight 获取div的高度
oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight +scrollTop +'px'
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
分析图:
效果图:
