This article introduces two types of css for fixed-bottom floating navigation code.

The fixed floating effect will inevitably produce jitter when dragging, and I still have a good liking for CSS. I found it and found it to the end of the world. It is pure CSS for a closer look, without JS effects, I think it is more streamlined than previously seen, and there is no need to nest excess DIV. Let's take a look at the CSS style section:

The code is as follows:	Copy code
Body {background-image: url(text.txt);/* for IE6 */ Background-attachment: fixed ;} # BottomNav {background-color: #096; z-index: 999; position: fixed; bottom: 0; left: 0; width: 100%; _ position: absolute; /* for IE6 */ _ Top: expression (documentElement. scrollTop + documentElement. ClientHeight-this.offsetHeight);/* for IE6 */overflow: visible ;}

Add the DIV id # bottomNav to the HTML part:

The code is as follows:	Copy code
<Div id = "bottomNav"> fixed floating object here O (& cap; _ & cap;) O www.111cn.net </div>

Let's take a look at the notes:

_ Top: expression (documentElement. scrollTop + documentElement. ClientHeight-this.offsetHeight );
We all know that _ top is exclusively prepared for IE6, but when I only add the above sentence, the float shown by pulling the scroll bar under IE6 is jittery-_-| solution: add the following statement to IE6:

Background-image: url(text.txt );
Note that text.txt does not need to have this txt file. The txt file name can be regarded as your preferences, so we can solve the easing problem in IE6. PS: You may be frustrated with text.txt and expression. Some people use multiple nested DIV layers to implement a false scroll bar, of course, this method will also change the default attributes accordingly. However, this write method is very depressing when it is integrated with previous websites. You need to add a DIV (because I didn't write a DIV in the outermost layer before. wrap ). In contrast, I prefer pure CSS Writing like Tianya.

Complete instance, you can directly copy the code to test:

The code is as follows:	Copy code
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Fixed floating reasons for choosing to write like this:

The code is as follows:

Copy code

Ul. catnavi {left: 265px; position: absolute; width: 330px; background: # fff; border: 1px solid # FFFFFF; box-shadow: 0 0 3px 1px # cccccccc; padding: 3px; top:-8px;} ul. catnavi li a, ul. catnavi2 li a {color: #000; padding-left: 10px;} ul. catnavi li a: hover, ul. catnavi2 li a: hover {background: url (images/nonius.gif) no-repeat-4px-27px; color: # C00909;} ul. catnavi li a, ul. catnavi2 li a {background: none; color: # AAA; padding-left: 0;} ul. catnavi li a: hover, ul. catnavi2 li a: hover {background: none; color: # C00909;} ul. catnavi li, ul. catnavi2 li {float: left; font-weight: 400; margin-right: 4px;} ul. catnavi li. current-cat a, ul. catnavi2 li. current-cat a {color: # C03;} ul. catnavi li, ul. catnavi2 li {display: block; font-weight: 700; padding: 3px; position: relative;} ul. catnavi li. current-cat a, ul. catnavi li. current-cat-parent a, ul. catnavi2 li. current-cat a, ul. catnavi2 li. current-cat-parent a {background: url (images/nonius.gif) no-repeat-4px 2px;} ul. catnavi li. current-cat li a, ul. catnavi li. current-cat-parent li a, ul. catnavi2 li. current-cat li a, ul. catnavi2 li. current-cat-parent li a {background: none;} ul. catnavi ul, ul. catnavi2 ul {left: 40px; margin-left: 68px; position: absolute; top: 0;} ul. catnavi2 {left: 620px; position: absolute; width: 330px; background: # fff; border: 1px solid # FFFFFF; box-shadow: 0 0 3px 1px # cccccccc; padding: 3px; top:-8px ;}# bottomNav {background-image: url(text.txt); background-attachment: fixed; background-color: #096; z-index: 999; position: fixed; width: 100%; _ position: absolute; _ top: expression_r (documentElement. scrollTop + documentElement. clientHeight-this.offsetHeight); overflow: visible ;}

Fixed functions:

The code is as follows:

Copy code

# BottomNav {background-image: url(text.txt); background-attachment: fixed; background-color: #096; z-index: 999; position: fixed; width: 100%; _ position: absolute; _ top: expression_r (documentElement. scrollTop + documentElement. clientHeight-this.offsetHeight); overflow: visible ;} <~ Div id = "bottomNav"> <~ Ul class = "catnavi"> <? Php wp_list_categories ('orderby = id & title_li = & show_count = 0 & use_desc_for_title = 1 & include = 68,149,126,127,128,208 ');?> <~ /Ul> <~ Ul class = "catnavi2"> <? Php wp_list_categories ('orderby = id & title_li = & show_count = 0 & use_desc_for_title = 1 & include = 57,67, 279 ');?> <~ /Ul> <~ /Div>