In fact, it is not difficult to implement it. First, let's look at the implementation process. First, if the navigation is within the display range, no modification is required. When the navigation is out of the display range, that is, when the distance between the navigation and the top of the screen is smaller than 0, we need to let it float on the top of the screen, and then perform a restore operation when it is greater than 0, the principle is so simple. Let's take a look at it.
Copy codeThe Code is as follows: $ (). ready (function (){
// The distance from the navigation bar to the top of the screen
Var _ defautlTop = $ ("# navigator"). offset (). top-$ (window). scrollTop ();
// The distance from the navigation bar to the left of the screen
Var _ defautlLeft = $ ("# navigator"). offset (). left-$ (window). scrollLeft ();
// Default style record for navigation, required when restoring the initial Style
Var _ position = $ ("# navigator" ).css ('position ');
Var _ top = $ ("# navigator" ).css ('top ');
Var _ left = $ ("# navigator" ).css ('left ');
Var _ zIndex = $ ("# navigator" ).css ('z-Index ');
// Scroll event
$ (Window). scroll (function (){
If ($ (this). scrollTop ()> _ defautlTop ){
// IE6 does not know position: fixed and uses position: absolute alone to simulate
If ($. browser. msie & $. browser. version = "6.0 "){
$ ("# Top" 2.16.css ({'position': 'absolute ', 'top': eval(document.doc umentElement. scrollTop), 'left': _ defautlLeft, 'z-Index': 99999 });
// Prevents Jitter
$ ("Html, body" ).css ({'background-image': 'url (about: blank) ', 'background-attachment': 'fixed '});
} Else {
$ ("# Navigator" ).css ({'position': 'fixed', 'top': 0, 'left': _ defautlLeft, 'z-Index': 99999 });
}
} Else {
$ ("# Navigator" ).css ({'position': _ position, 'top': _ top, 'left': _ left, 'z-Index ': _ zIndex });
}
});
});
I don't know much about it. One thing to note is that IE6 doesn't know position: fixed and needs to use position: absolute to simulate it and then calculate the top value in real time, in addition, you need to add two styles to the html and body to prevent jitter during scrolling. For details, see the perfect solution to the bug that IE6 does not support position: fixed.
Note that the navigation width must be a fixed value, not auto or 100%, because fixed and absolute do not know each other. Of course, you can also manually obtain the navigation width, then write it into the floating navigation style, but there is a premise that the original navigation style cannot have: position: relative, there may be many situations, the simplest way is to set the navigation width to death.
The above code can be copied to the HTML footer code set in the background. If there is a problem with the floating navigation width, refer to the solution I just made.
