Some content in the sidebar will be fixed at that position after it is rolled to the top of the page and will not scroll with the scroll bar. Many webmasters may want to achieve this effect. Next I will introduce it to you in detail, if you are interested, do not miss out on some websites that you often see When browsing the website. Some content in the sidebar is fixed at the top of the page and will not scroll with the scroll bar. This effect is called "rolling with the navigation bar ". It is useful for content that does not want to be rolled out of the page.
There are many ways to implement the scroll method on the sidebar. There are two common methods. These two methods are clearly described in an article written by neotify, one method is implemented using jQuery. This method is obviously a burden for websites that do not need to load the jQuery library at ordinary times (jQuery is getting bigger and bigger now ......). Another method is the effect of writing through Native javascript, which is much lighter than the previous one. However, I am not satisfied enough. There are also more than 4 K Files written in native javascript. For me, it is still too complicated to be simple-oriented. Is there a simpler implementation method?
Of course, the answer is yes. The following is a detailed description.
First, let's talk about html files (but also dynamic files, which always contain html code)
The Code is as follows:
Add the content to follow the scroll here
Then the CSS code
The Code is as follows:
# Box {float: left; position: relative; width: 250px ;}
. P1 {width: 250px ;}
. P2 {position: fixed; _ position: absolute; top: 0; z-index: 250 ;}
Finally, JS Code (can be placed in the page to be rolled, or in a separate JS file for calling)
The Code is 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.doc umentElement. scrollTop;
If (s> H) {oDiv. className = "p1 p2"; if (iE6) {oDiv. style. top = (s-H) + "px ";}}
Else {oDiv. className = "p1 ";}
};
}
})();
OK. It's easy enough.
Finally, let's give an example.
