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 相关文章推荐
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 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
linux下 C语言对 php 扩展
2008/12/14 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
PHP 快速排序算法详解
2014/11/10 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
python 对象和json互相转换方法
2018/03/22 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
Python collections模块的使用方法
2020/10/09 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
办公室前台岗位职责
2014/01/04 职场文书
企业军训感想
2014/02/07 职场文书
财产公证书格式
2014/04/10 职场文书
小小商店教学反思
2014/04/27 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
初中运动会前导词
2015/07/20 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers