Browsing the site often see the site, the sidebar of some content scrolling to the top of the page after the fixed in that position, no longer follow the scroll bar and scrolling. This effect is called "Side bar follow scrolling". It is useful for content that does not want to be scrolled out of the page.
Side column following the implementation of the rolling method there are many, more common there are two, these two methods in a neoease written article is very clear, one is the use of jquery to implement, this method for those who do not need to load the jquery library site, Obviously a burden (jquery is now getting bigger ...). ）。 Another approach is the effect of native JavaScript, which is much lighter than the previous one. However, I am still not satisfied, native JavaScript write a file of 4K more, for me this to the first person, still too complicated. Is there a simpler way to achieve this?
The answer is certainly yes. The following is a specific description.
First of all, the HTML file (but also dynamic file, there is always HTML code)
Copy Code code as follows:
<div id= "box" >
<div id= "float" class= "Div1" >
Add here to follow the scrolling content
</div>
</div>
And then the CSS code
Copy Code code as follows:
#box {float:left; position:relative;width:250px;}
. div1{width:250px;}
. div2{position:fixed;_position:absolute;top:0;z-index:250;}
Finally, JS code (can be placed in the need to scroll the page, you can also put in a separate JS file and then call)
Copy Code code as follows:
(function () {
var Odiv=document.getelementbyid ("float");
var h=0,ie6;
var Y=odiv;
while (Y) {h+=y.offsettop; Y=y.offsetparent};
Ie6=window. Activexobject&&!window. XMLHttpRequest;
if (!IE6) {
Window.onscroll=function ()
{
var s=document.body.scrolltop| | Document.documentElement.scrollTop;
if (s>h) {odiv.classname= "Div1 div2"; if (iE6) {odiv.style.top= (s-h) + "px";}}
Else{odiv.classname= "Div1";}
};
}
})();
OK, it's easy enough.
Finally, give an example.
