In fact, it is not difficult to achieve, we first the implementation process to think about, first of all, if the navigation in the scope of the display, you do not have to make changes. When the navigation is out of range, that is, the distance from the top of the screen is less than 0, we have to float it on the top of the screen, and then more than 0, to do a recovery operation, the principle is so simple, roughly look at the effect of the picture
Copy Code code as follows:
$ (). Ready (function () {
Navigation distance from top of screen
var _defautltop = $ ("#navigator"). Offset (). Top-$ (window). scrolltop ();
Navigation distance from the left side of the screen
var _defautlleft = $ ("#navigator"). Offset (). Left-$ (window). scrollleft ();
Navigating default Style records, restoring the initial style requires
var _position = $ ("#navigator"). CSS (' position ');
var _top = $ ("#navigator"). CSS (' top ');
var _left = $ ("#navigator"). CSS (' left ');
var _zindex = $ ("#navigator"). CSS (' Z-index ');
Mouse scrolling Events
$ (window). Scroll (function () {
if ($ (this). ScrollTop () > _defautltop) {
IE6 do not know position:fixed, alone with Position:absolute simulation
if ($.browser.msie && $.browser.version== "6.0") {
$ ("#top"). css ({' position ': ' absolute ', ' top ': eval (document.documentElement.scrollTop), ' left ': _defautlleft, ' Z-index ': 99999});
Prevent Jitter from appearing
$ ("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});
}
});
});
Not too much to speak of, need to pay attention to IS, IE6 don't know position:fixed, need to use Position:absolute to simulate, and then calculate top value in real time, also need to add two styles to HTML and body, prevent rolling when jitter occurs, Specific to understand the "perfect solution IE6 does not support the position:fixed bug."
Also note that the width of the navigation must be fixed value, not auto or 100% because fixed and absolute do not know, of course, you can also manually get the width of the navigation, and then write to the floating navigation style, but there is a prerequisite, The original style of navigation can not be: position:relative, the situation may be more, the simplest way is to set the navigation width dead.
The above code can be copied to the background settings of the HTML footer code, if encountered floating navigation width problems, refer to the treatment I have just done to solve it.
