Little knowledge point, without further ado, just go to the code
css:
<style> <br>#anchor:{ <br>position:absulate; <br>top:40%; <br>left:40%; <br>width:100px; <br>height:100px; <br>background-color:red; <br>} <br></style> js:
var auchorTop = $("#anchor").css("top"); <br>auchorTop = Number(auchorTop.substring(0, anchorTop.indexOf( "p"))); //First record the initial position of a label with id=anchor outside the listener <br>window.onscroll = function () { <br>var top = document.documentElement.scrollTop || document. body.scrollTop; <br>$("#anchor").css("top", anchorTop top "px"); <br>};
html:
You can add a scroll bar scrolling event on window.onscroll. The reason why top=document.documentElement.scrollTop||document.body.scrollTop; in the listening function is written like this is To avoid compatibility between different browsers, here I tested chrom and ff browsers. The former supports the document.body.scrollTop attribute, and the latter supports another attribute, so you can use the '||' symbol to combine these two attributes, which is compatible Different browsers. AnchorTop is the distance between the start of the target and the top of the browser. What needs to be noted here is the position of the '#anchor' tag: absulate, otherwise the top attribute value is always 0px.
When the scroll bar scrolls, the top value changes, and then the initial top value of '#anchor' is added to the top value of the scroll bar to keep the content at the same position.
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
