scrollTop实例

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>scrollTop</title>
<style>
#div1{width: 200px;height: 150px;background: red;position: absolute;right: 0;bottom: 0;}
body{height: 2000px;}
</style>
</head>
<body>
<div id="div1"></div>
<script>
//clientHight 可视区高度
//offsetHight 物体的高度

//IE FF
//alert(document.documentElement.scrollTop);

//chrome
//alert(document.body.scrollTop)

//IE6下的固定定位是不可行的 fixed不可用 scrollTop+clientHight-offsetHight(能够把div固定在可视区下方)

window.onscroll = window.onresize = function(){
var oDiv = document.getElementById("div1");
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动条的垂直位置

oDiv.style.top = document.documentElement.clientHeight-oDiv.offsetHeight + scrollTop + "px";

}

</script>
</body>
</html>

巴特西

scrollTop实例

最新文章

热门文章