js监听滚动条滚动事件使得某个标签内容始终位于同一位置


Posted in Javascript onJanuary 24, 2014

小知识点,废话不多说,直接上代码

css:

<pre name="code" class="css"><style> 
#anchor:{ 
position:absulate; 
top:40%; 
left:40%; 
width:100px; 
height:100px; 
background-color:red; 
} 
</style></pre><br>

js:
<pre name="code" class="javascript">var auchorTop = $("#anchor").css("top"); 
auchorTop = Number(auchorTop.substring(0, anchorTop.indexOf("p"))); //首先在监听器外部记录某id=anchor的标签的初始位置 
window.onscroll = function () { 
var top = document.documentElement.scrollTop || document.body.scrollTop; 
$("#anchor").css("top", anchorTop + top + "px"); 
};</pre>

html:
<div id="anchor"></div>

在window.onscroll上即可添加滚动条滚动事件,在监听函数中的top=document.documentElement.scrollTop||document.body.scrollTop;之所以这么写,就是避免不同浏览器的兼容性,这里我测试了chrom和ff浏览器,前者支持document.body.scrollTop这个属性,后者支持另一个属性,因此可以用‘||'符号糅合这两个属性,兼容不同浏览器。anchorTop就是目标的开始与浏览器顶部的距离,这里还需要注意的是'#anchor‘这个标签的position:absulate,否则top属性值总是是0px。

当滚动条滚动时,top值变化,随后将'#anchor'的初始top值加上滚动条的top值,即可保持内容始终处于同一位置。

Javascript 相关文章推荐
用函数式编程技术编写优美的 JavaScript
Nov 25 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
BootStrap表单时间选择器详解
May 09 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 #Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 #Javascript
js关于字符长度限制的问题示例探讨
Jan 24 #Javascript
JS方法调用括号的问题探讨
Jan 24 #Javascript
Array栈方法和队列方法的特点说明
Jan 24 #Javascript
js sort 二维数组排序的用法小结
Jan 24 #Javascript
js二维数组排序的简单示例代码
Jan 24 #Javascript
You might like
php 时间计算问题小结
2009/01/04 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
php实现webservice实例
2014/11/06 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
js循环改变div颜色具体方法
2013/06/25 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
python实现网站的模拟登录
2016/01/04 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
销售总监工作职责
2013/11/21 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
面试通知单大全
2015/04/20 职场文书
春季运动会加油词
2015/07/18 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
python turtle绘图命令及案例
2021/11/23 Python
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python
Win11查看设备管理器
2022/04/19 数码科技