示例：屏幕右側懸浮框
原理：oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + "px";
知識點:
瀏覽器窗體的高度
document.documentElement.clientHeight
瀏覽器滾動的高度
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
html部分
<body style=" height:1600px;"> <div id="div1"></div> </body> #div1 { position:absolute; right:0; bottom:0; width:100px; height:150px; background:green;}
js部分
<script>
window.onscroll = function(){
var oDiv = document.getElementById("div1");
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + "px";
oDiv.style.top = startMove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop);
}
var timer = null;
function startMove(iTarget){
clearInterval(timer);
timer = setInterval(function(){
var oDiv = document.getElementById("div1");
var speed = (iTarget - oDiv.offsetTop)/4;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(oDiv.offsetTop == iTarget){
clearInterval(timer);
} else {
oDiv.style.top = oDiv.offsetTop + speed + "px";
}
},30);
}
</script>
同上面這個懸浮框，可心改成另一個示例：對聯懸浮框
示例：對聯懸浮框
原理：
iTarget = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop;
潛在問題：
對聯一直在不停的抖動
檢測分析：
1,打印出這個div 的offsetTop，發現它的值始終在兩個相關1像素的值之間跳動
2,再打印iTarget發現它是800.5
原因：iTarget不是一個整數，造成“對聯”不停的抖動
解決:
iTarget = parseInt((document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop);