右侧垂直居中的悬浮框

最新推荐文章于 2021-08-04 00:39:44 发布

爱生活，爱编程

最新推荐文章于 2021-08-04 00:39:44 发布

阅读量320

点赞数

分类专栏： javascript基础笔记

本文链接：https://blog.csdn.net/qq_15009739/article/details/103753562

版权

用到的知识点， window.onscroll 事件的监听

scrollTop 值的获取，

屏幕的宽高

缓冲框架的使用

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; right:0;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onscroll=function ()
{
	var oDiv=document.getElementById('div1');
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	
	//oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+'px';
	var t=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
	
	startMove(parseInt(t));
}

var timer=null;

function startMove(iTarget)
{
	var oDiv=document.getElementById('div1&#

最低0.47元/天解锁文章

爱生活，爱编程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
右侧垂直居中的悬浮框

用到的知识点， window.onscroll 事件的监听scrollTop 值的获取，屏幕的宽高缓冲框架的使用<html xmlns="http://www.w3.org/1999/xhtml"><head><style>#div1 {width:100px; height:100px; background:red; position...
复制链接

扫一扫

专栏目录