如何 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:
- 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");
- };
- 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 值, 即可保持内容始终处于同一位置.
来源: http://www.w3cdream.com/content-sort-21-article-382.html