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 相关文章推荐
Jquery AJAX 用于计算点击率(统计)
Jun 30 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 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
谈一谈收音机的高放电路
2021/03/02 无线电
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
销售找工作求职信
2013/12/20 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
实习生评语
2014/04/26 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
转变工作作风心得体会
2016/01/23 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript