滚动悬浮框——js全解

最新推荐文章于 2024-06-23 19:42:06 发布

FE焱黑C

最新推荐文章于 2024-06-23 19:42:06 发布

阅读量2.6k

点赞数

文章标签： web前端js代码悬浮框

本文链接：https://blog.csdn.net/qq_36771997/article/details/72835291

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*为了撑出来滚动条*/
body{height: 2000px;}
#suspension{width: 100px;height: 100px;background: red; position: absolute; bottom: 0;right: 0;}
</style>
<script>
//考虑window改变窗口大小时悬浮框随之变动的情况
window.οnscrοll=window.οnresize=function(){
var oDiv=document.getElementById('suspension');
//document.documentElement.scrollTop 谷歌浏览器不支持，其他浏览器都支持；document.body.scrollTop谷歌支持
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//也有用下面的scrollTop兼容方式; 其中window.pageYOffset:所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性,但是IE 8 及更早 IE 版本不支持该属性
//var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
//可视区高度-div高度+滚动距离
//oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
//判断是否为ie6;因为ie6不支持 position：fixed;
//window.XMLHttpRequest我们联想到了Ajax中的创建XHR对象:var request;if(window.XMLHttpRequest){request=new XMLHttpRequest} else{request=new ActiveXObject('Microsoft.XMLHTTP')}

if(!window.XMLHttpRequest){
startMove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop);
}
//如果不是ie6,则直接用fixed即可
else{
oDiv.style.position='fixed';
}
}
var timer=null;
function startMove(iTarget){
var oDiv=document.getElementById('suspension');
clearInterval(timer);
timer=setInterval(function(){

var speed=(iTarget-oDiv.offsetTop)/8;

//速度取整

speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(iTarget==oDiv.offsetTop){
clearInterval(timer);
}
else{
oDiv.style.top=oDiv.offsetTop+speed+'px';
}
},30)
}

</script>
</head>
<body>
<div id="suspension"></div>
</body>

</html>

本文主由position:fixed在ie6下不支持而引起的的'血案’——涉及1.window.οnscrοll=window.onresize来控制窗口滚动和大小变化；2.scrollTop的兼容控制；3.if(!window.XMLHttpRequest)来判断是否为ie6，可以联想到Ajax创建XHR对象；4.待完善的地方在于offsetHeight的bug，offsetHeight包括border和padding的问题需要用getStyle来处理下......

FE焱黑C

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滚动悬浮框——js全解

本文主由position:fixed在ie6下不支持而引起的的'血案’——涉及1.window.onscroll=window.onresize来控制窗口滚动和大小变化；2.scrollTop的兼容控制；3.if(!window.XMLHttpRequest)来判断是否为ie6，可以联想到Ajax创建XHR对象；4.待完善的地方在于offsetHeight的bug，offsetHeight包括border和padding的问题需要用getStyle来处理下......
复制链接

扫一扫