Jquery automatically sticks to the top of the screen when the navigation bar is out of the display range

This is often the case. When the content displayed on the page is too long, you have to pull the scroll bar back to the top if you want to switch the navigation column. This operation is not user-friendly, can I automatically paste the navigation outside the display range to the top of the screen? The answer is yes. If you don't quite understand it, pull the scroll bar to the bottom and check my blog to see the effect.

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.

$ (). Ready (function () {// The distance from the navigation bar to the top of the screen is var _ defautlTop =$ ("# navigator "). offset (). top; // avoid the following situation on the 16th floor. // The distance from the navigation bar to the left of the screen is var _ defautlLeft = $ ("# navigator "). offset (). left; // default style record for navigation. var _ position =$ ("# navigator" ).css ('position') is required to restore the initial style '); 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. Use position: absolute to simulate if ($. browser. msie & $. browser. version = "6.0") {$ ("# top" placement .css ({'position': 'absolute ', 'top': eval(document.doc umentElement. scrollTop), 'left': _ defautlLeft, 'z-Index': 99999}); // prevents jitter $ ("html, body "2.16.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.

PS: I found a related article "how to fix the footer at the bottom of the page", which is also a practical function.