xScrollStick JS special effect that floats with the scroll bar_Layout and layers

This is a JS special effect that floats following the scroll bar, which means that the scroll bar scrolls while the element’s position relative to the screen remains unchanged

There are many similar effects on the Internet. This code has the following advantages in comparison:

1. Compatible with IE6.0 & FF1.5
2. It is very simple to use and is the favorite for beginners. See the instructions below
3. There will be no conflicts between elements. Conflict, there can be n special effects on one page, and there is no code redundancy when using multiple elements

The disadvantages are:

1. Can only be used in documents declared as xHTML
2. It is best to place elements under the body
3. There will inevitably be flickering when scrolling (it is already relatively slight, but those who pursue perfection may find it uncomfortable)

Instructions for use:
Quote JS in the page package, and then set the class to xScrollStick on the div that needs special effects. Of course, don’t forget to write the position you want it to be fixed for each element

Example 1:

Copy code The code is as follows:

Content...

Example 2:

Copy code The code is as follows:

Content...

Demo:

Run Code Box

<meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>xScrollStick Demo</title> <style> .xScrollStick{ position:absolute; padding:15px; border:1px solid black; width:120px; height:24px; } .d1 { left:0px;top:0px; } .d2 { right:0px;top:0px; } .d3 { left:0px;bottom:0px; } .d4 { right:0px;bottom:0px; } </style> <div class="xScrollStick d1"> <a href="http://www.163.com"> </a>I am a floating bar</div> <div class="xScrollStick d2"> </div>I am floating bar 2<div class="xScrollStick d3"> </div>I am floating bar 3<div class="xScrollStick d4"> </div>I am floating bar 4<div style="top:0px;width:400px;height:2000px;"> <br> afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg</div>