JavaScript实现滚动条固定定位标签的完整代码与原理

JavaScript实现滚动条固定定位标签的完整代码与原理

这是一个实用的前端开发技巧，下面直接展示实现代码。

CSS样式部分：

 
<pre name="code" class="css"><style>
#anchor{
position:absulate;
top:40%;
left:40%;
width:100px;
height:100px;
background-color:red;
} 
</style></pre><br>

JavaScript脚本部分：

 
<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;这一写法旨在避免不同浏览器的兼容性问题。经测试，Chrome浏览器支持document.body.scrollTop属性，而Firefox浏览器支持document.documentElement.scrollTop属性，因此使用'||'运算符合并这两个属性以实现跨浏览器兼容。anchorTop表示目标元素初始位置与浏览器顶部的距离。需要注意的是，'#anchor'标签必须设置position为absulate（原文如此，通常应为absolute），否则top属性值将始终为0px。

当滚动条发生滚动时，top值随之变化。随后将'#anchor'的初始top值加上当前滚动条的top值，即可保持内容始终处于同一相对位置。