Fixed floating navigation bar at the bottom of the webpage

Some things are difficult to find, and they are even more difficult to find. I have seen many fixed floating navigation bars written in JS before. This effect will inevitably cause jitter when being dragged.

I still like CSS very much. I found it and found the world. Take a closer look.Pure CSSOfCode. Js effect is not used.

I think it is simpler than what I saw before, without having to nest extra Divs.

A simple look at the CSS style section:

Reference content is as follows: 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:

Reference content is as follows: <Div id = "bottomnav"> fixed floating object O (cost _ attention) O ~ </Div>

Let's take a look at the notes:

Reference content is as follows: _ 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, IE6 pulls the floating thing that the scroll bar sees as jitters.

Solution: add the following statement to IE6:

Reference content is as follows: 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. Here isDemo.

Fixed floatingSelect the reason for writing as follows:

Reference content is as follows: The pure CSS syntax avoids the embarrassing scenes of website reconstruction troubles caused by the creation of fake scroll bars by nesting an external Div layer. At the same time, there will be no Jitter Caused by JS floating.

It may be betterFixed floating navigationI didn't find out. If you have more and better methods, don't forget to tell me!