JS简单实现DIV相对于浏览器固定位置不变的方法
作者：hbiao68 时间：2023-08-05 22:30:12
本文实例讲述了JS简单实现DIV相对于浏览器固定位置不变的方法。分享给大家供大家参考，具体如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>Anchor Properties</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="noindex, nofollow" name="robots">
<script>
function Totop(){
window.scrollTo(0,0);
}
function bottom(){
//scrollHeight属性是获取对象的滚动高度。
window.scrollTo(0,document.body.scrollHeight);
}
function left(){
//alert("left");alert(document.body.scrollLeft)
var left = 0-document.body.scrollWidth;//向左移动的像素
window.scrollBy(left,0 );
}
function right(){
//alert(document.body.scrollWidth);
//整个滚动条的宽度
window.scrollBy(document.body.scrollWidth,0);
}
function init(){
var init_pos=oLayer.style.posTop ;
var init_left=oLayer.style.posLeft;
document.body.onscroll=function(){
//document.body.scrollTop等于滚动滑块上端离滚动的开始点的距离
oLayer.style.posTop=document.body.scrollTop+init_pos;
//scrollLeft设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
oLayer.style.posLeft=document.body.scrollLeft +init_left;
}
}
</script>
</head>
<body onload="init()">
<a onclick="bottom()">置底</a>
<div id="oLayer" style="position:absolute;left:120;top:60;z-index:2;background:green;width:120px;height:120px"> ddddd
</div>
<br>
<a onclick="right()">置 右</a>
<div style="width:1500px;height:30px;float:left">width="2000px"</div>
<a style="float:right" onclick="left()">置 左</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a onclick="Totop()">置 顶</a>
</body>
</html>
希望本文所述对大家JavaScript程序设计有所帮助。
标签：JS,DIV,固定位置
0
投稿猜你喜欢
这么多的 Oracle 性能工具
2008-06-04 11:20:00
hover悬停放大的翻页效果
2008-05-19 12:20:00
SQL文本字段的数字排序问题
2008-11-18 16:47:00
完美的渐变透明效果，支持Firefox
2008-06-18 18:18:00
常见系统中文字体的英文名
2008-03-03 12:44:00
XHTML 和 DOCTYPE 切换
2007-05-31 09:30:00
Tensorflow分类器项目自定义数据读入的实现
2023-06-21 20:21:53
简单的网站页面有什么好处
2007-11-15 06:28:00
js实现用div层模拟的小窗口
2007-12-02 15:01:00
MySQL 5.0 数据库新特性的存储过程
2007-10-24 19:45:00
MySQL数据库的授权原则
2008-12-29 13:39:00
Web2.0视觉风格进化论 之二
2007-11-03 20:10:00
Opera Mini 5 网站开发速记
2010-04-20 16:29:00
Javascript:keyCode键盘键码值表
2008-02-21 13:16:00
针对SQL Server中业务规则链接的分析
2009-01-20 11:43:00
SQL Server 数据页缓冲区的内存瓶颈分析
2012-08-21 10:49:11
纯CSS圆角框
2009-12-11 18:57:00
PHP循环与分支知识点梳理
2023-05-29 13:09:21
PHP PDOStatement::fetchColumn讲解
2023-06-06 09:17:20
JS页内查找关键词的高亮显示
2013-07-18 21:13:54