js listens to the scroll bar scroll event so that the content of a certain label is always at the same position_javascript skills

<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>

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>};

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.