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的标签的初始位置
var top = document.documentElement.scrollTop || document.body.scrollTop;
$("#anchor").css("top", anchorTop + top + "px");
};</pre>
html:
复制代码代码如下:
<div id="anchor"></div>js控制滚动条
在scroll上即可添加滚动条滚动事件，在监听函数中的
top=document.documentElement.scrollTop||document.body.scrollTop；之所以这么写，就是避免不同浏览器的兼容性，这⾥我测试了chrom和ff浏览器，前者⽀持document.body.scrollTop这个属性，后者⽀持另⼀个属性，因此可以⽤‘||'符号糅合这两个属性，兼容不同浏览器。anchorTop就是⽬标的开始与浏览器顶部的距离，这⾥还需要注意的是'#anchor‘这个标签的position：absulate，否则top属性值总是是0px。
当滚动条滚动时，top值变化，随后将'#anchor'的初始top值加上滚动条的top值，即可保持内容始终处于同⼀位置。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。