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 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 Javascript
js加减乘除精确运算方法实例代码
Jan 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
php计算给定时间之前的函数用法实例
2015/04/03 PHP
php备份数据库类分享
2015/04/14 PHP
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
Python程序员开发中常犯的10个错误
2014/07/07 Python
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
用pycharm开发django项目示例代码
2019/06/13 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
校园摄影活动策划方案
2014/02/05 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
优秀班组事迹材料
2014/12/24 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
秋收起义观后感
2015/06/11 职场文书
高中地理教学反思
2016/02/19 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis