JS简单实现DIV相对于浏览器固定位置不变的方法


Posted in Javascript onJune 17, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 #Javascript
JS中递归函数
Jun 17 #Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 #Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 #Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 #Javascript
聊一聊JS中this的指向问题
Jun 17 #Javascript
json实现添加、遍历与删除属性的方法
Jun 17 #Javascript
You might like
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
python交互式图形编程实例(一)
2017/11/17 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
python 实现A*算法的示例代码
2018/08/13 Python
详解python做UI界面的方法
2019/02/27 Python
python同步两个文件夹下的内容
2019/08/29 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
Java模拟试题
2014/11/10 面试题
怎么写有吸引力的自荐信
2013/11/17 职场文书
秘书专业自荐信范文
2013/12/26 职场文书
班级聚会策划书
2014/01/16 职场文书
学习型党组织心得体会
2014/09/12 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技