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 相关文章推荐
日期 时间js控件
May 07 Javascript
JQuery 学习笔记 选择器之六
Jul 23 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
Python爬虫爬验证码实现功能详解
2016/04/14 Python
python机器人行走步数问题的解决
2018/01/29 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
python中的decimal类型转换实例详解
2019/06/26 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
运动会入场式解说词
2014/02/18 职场文书
报关专员求职信范文
2014/02/22 职场文书
大学生求职计划书
2014/04/30 职场文书
爱护花草树木的标语
2014/06/11 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
新员工考核评语
2014/12/31 职场文书
党员年度个人总结
2015/02/14 职场文书