本文详细介绍如何利用JavaScript监听window.onscroll事件，结合CSS的position: absolute属性，实现特定标签在页面滚动时始终保持在同一可视位置。文章提供了完整的HTML、CSS及JS代码示例，重点解析了document.documentElement.scrollTop与document.body.scrollTop的兼容性处理逻辑，以及初始位置计算与动态更新的方法，适用于Chrome和Firefox等主流浏览器。
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值，即可保持内容始终处于同一相对位置。