js监听滚动条滚动事件使得某个标签内容始终位于同一位置
更新时间：2014年01月24日 15:08:05 作者：
js如何监听滚动条滚动事件，使得某个标签内容始终位于同一位置，下面有个不错的示例，大家可以参考下
小知识点，废话不多说，直接上代码
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值，即可保持内容始终处于同一位置。
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值，即可保持内容始终处于同一位置。
相关文章
DOM节点是一个对象，它有着一些属性。其中有些是只读的，有些可以直接进行更改（updated on-the-fly）。今天我们就来具体探讨下DOM的基本属性，希望对大家能有所帮助2015-02-02
这篇文章主要给大家介绍了利用Javascript计算二维数组重复值的方法，文中给出了详细的示例代码，相信对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。2016-12-12
这篇文章主要介绍了获取当前点击按钮的id的方法，,需要的朋友可以参考下2014-03-03
用JavaScript实现 铁甲无敌奖门人 “开口中”猜数游戏
JavaScript在常人看来都是门出不了厅堂的小语言，仅管它没有明星语言的闪耀，但至少网页的闪耀还是需要它的，同时它是一门很实用的语言。2009-10-10
本文主要介绍防止重复发送 Ajax请求的方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
本文主要介绍了JavaScript尾递归的实现及应用场景，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了javascript创建cookie、读取cookie的操作方法，内容简单易学，感兴趣的小伙伴们可以参考一下2016-03-03
NW.js （原名 node-webkit）是一个基于 Chromium 和 node.js 的应用运行时，通过它可以用 HTML 和 JavaScript 编写原生应用程序.这篇文章主要介绍了NW.js 简介与使用,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了js子页面如何获取父页面数据,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了JavaScript cookie 跨域访问之广告推广 的相关资料,需要的朋友可以参考下2016-04-04
最新评论