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 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
google地图的路线实现代码
Aug 20 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
JavaScript find()方法及返回数据实例
Apr 30 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
什么是MVC,好东西啊
2007/05/03 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
vue写一个组件
2018/04/09 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
python 读入多行数据的实例
2018/04/19 Python
Python列表list排列组合操作示例
2018/12/18 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
python关于调用函数外的变量实例
2019/12/26 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
东方电视购物:东方CJ
2016/10/12 全球购物
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
《与朱元思书》的教学反思
2014/04/17 职场文书
医德医魂心得体会
2014/09/11 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
四风之害观后感
2015/06/09 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python
Redis+AOP+自定义注解实现限流
2022/06/28 Redis