Small knowledge points, not much nonsense, just apply the code directly
CSS:
Copy code code as follows:
<pr name = "code"> <style>
#anchor: {{
position: absule;
TOP: 40%;
left: 40%;
width: 100px;
height: 100px;
background-color: red;
}
</style> </pre> <br>
js:
Copy code code as follows:
<pr name = "code"> var auchortop = $ ("#Anchor"). css ("top");
auchortop = number (AUCHORTOP.SUBSTRING
Window.onscroll = Function () {
var top = document.documentelement.scroltop || docume
$ ("#Anchor"). CSS ("Top", Anchortop + Top + "Px");
}; </pre>
html:
Copy code code as follows:
<div ID = "Anchor"> </DIV>
You can add rolling bars to rolling events on Window.onscroll. Top = Document.documentlement.scrolltop || Document.body.scrolltop; The chrom and FF browsers, the former supports the document.body.scrolltop attribute. The latter supports another attribute. Therefore, you can use the "|| 'symbols to combine these two attributes, which is compatible with different browsers. Anchortop is the distance between the start of the target and the top of the browser. Here you need to pay attention to the posity of "#Anchor '.
When the rolling bar is rolled, the TOP value changes, and then the initial TOP value of the '#Anchor' plus the TOP value of the scroll bar can keep the content always in the same position.