jquery implements how to automatically fix navigation that exceeds the display range to the top of the screen_jquery

In fact, it is not difficult to implement. Let's think about the implementation process in general. First, if the navigation is within the display range, there is no need to modify it. When the navigation exceeds the display range, that is, when the distance between the navigation and the top of the screen is less than 0, we need to let it float on the top of the screen, and then when it is greater than 0, perform a restoration operation. The principle is that simple. Take a rough look at the renderings. Bar

Copy the code The code is as follows:

$().ready (function(){
//Navigation distance from the top of the screen
var _defautlTop = $("#navigator").offset().top - $(window).scrollTop();
//Navigation Distance from the left side of the screen
var _defautlLeft = $("#navigator").offset().left - $(window).scrollLeft();
//Navigation default style record, 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');
//Mouse scroll event
$(window) .scroll(function(){
if($(this).scrollTop() > _defautlTop){
//IE6 does not recognize position:fixed, use position:absolute alone to simulate
if($. browser.msie && $.browser.version=="6.0"){
$("#top").css({'position':'absolute','top':eval(document.documentElement.scrollTop) ,'left':_defautlLeft,'z-index':99999});
//Prevent 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});
}
});
});

Not much to say , one thing to note is that IE6 does not recognize position:fixed, so you need to use position:absolute to simulate it, and then calculate the value of top in real time. In addition, you need to add two styles to html and body to prevent jitter when scrolling. Specifically, you can Learn about "Perfect solution to the bug that IE6 does not support position:fixed".

Another thing to note is that the width of the navigation must be a fixed value. It cannot be auto or 100% because fixed and absolute are not recognized. Of course, you can also manually obtain the width of the navigation and then write it to float. In the navigation style, there is a premise. The original navigation style cannot have: position: relative. This may be the case. The simplest way is to set the navigation width.

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, please refer to the solution I just did.