Jquery & CSS is compatible with IE6 at the top and bottom of the fixed floating toolbar)

Jquery & CSS, top and bottom fixed floating toolbar compatible with IE6

Http://www.bluesdream.com

18

December

2012

Now, you can often see some websites (such as Sina Weibo and huaban) Navigation bars or toolbar fixed at the top of the page or somewhere else. This layout method makes it easy for users to click and "impression". You do not need to drag the webpage to a specific location each time to click or view the webpage.

In fact, this layout method has been available for a long time, but it is not so convenient to promote it. It is not complicated to do. You only need to set a small attribute "position: fixed". The most important thing is to be compatible with IE6.

First, let's look at htmlCodeIs it super simple? What we provide here is a simple framework. In actual application, you only need to add the desired element to this region.

HTML code:

< Div ID = "Header" > Default header. No absolute and fixed. </ Div > < Div ID = "Toptoolbar" > Fixed at the top of the toolbar. </ Div > < Div ID = "Content" > < P > 1000 words are omitted here... </ P > </ Div > < Div ID = "Bottomtoolbar" > Fixed at the bottom of the toolbar. By bluesdream.com </ Div >

 

CSS code:

<Style type = "Text/CSS" > /* Global CSS */ *{ Margin : 0px ; Padding : 0px ;} A { Text-Decoration : None ; Outline : None ;} A: hover { Text-Decoration : Underline ;} /* Instance CSS */ HTML { _ Background : URL (About: blank );} /* Block the flash in IE6, change the empty file to about: blank, and reduce the request */ Body { Font-size : 12px ; Font-family : Arial , Tahoma , Sans-serif ; Color : # Eeeeee ; Text-align : Center ; Background : # E2e2e2 ;} # Toptoolbar { _ Display : None ; Width : 100% ; Height : 40px ; Line-height : 40px ; Background : #101010 ; Border-bottom : 2px Solid #409f89 ; Position : Fixed ; Top : -40px ; Left : 0 ; _ Position : Absolute ; _ Top : 0 ; } # Bottomtoolbar { Width : 100% ; Height : 40px ; Line-height : 40px ; Background : #101010 ; Border-top : 2px Solid #409f89 ; Position : Fixed ; Bottom : 0 ; Left : 0 ; _ Position : Absolute ; _ Top : Expression (documentelement. scrolltop + documentelement. clientHeight-this.offsetHeight ); /* Document. Body. scrolltop webpage scrolling distance Document. Body. clientheight webpage visible area high This. offsetheight the height of the current element */ } # Bottomtoolbar { Color : # Fff ;} # Header { Width : 100% ; Height : 80px ; Line-height : 80px ; Background : #101010 ; Border-top : 2px Solid #409f89 ; } # Content { Width : 880px ; Height : 1390px ; Line-height : 18px ; Text-align : Left ; Margin : 40px Auto 80px Auto ; Padding : 30px 50px ; Background : # Fff URL (Images/scaleplate.png) No-repeat ; Border : 1px Solid # Ccc ; } </Style>

JavaScript code:

<SCRIPT type = "Text/JavaScript" > $ ( Function (){ $ (Window). Scroll ( Function (){ VaR Toptoolbar = $ ( "# Toptoolbar" ); VaR Headerh = $ ( "# Header" ). Outerheight (); VaR Scrolltop = $ (document). scrolltop (); // The IE6 expression method and jquery animate method may cause problems when used by colleagues. Therefore, add a judgment to simplify the display mode in IE6. If ($. Browser. MSIE & ($. browser. Version = "6.0" )&&! $. Support. Style ){ If (Scrolltop> = headerh ){ Toptoolbar. Show (); } Else If (Scrolltop Toptoolbar. Hide (); } } Else { If (Scrolltop> = headerh ){ Toptoolbar. animate ({ 'Top' : 0 }); } Else If (Scrolltop Toptoolbar. animate ({ 'Top' :-40 }); } }; }); }); </SCRIPT>

Demodownload

If the JS part is always flushed to the top like Sina Weibo, you can ignore it. It doesn't matter if there is any. Just change the CSS.

# Toptoolbar { Width : 100% ; Height : 40px ; Line-height : 40px ; Background : #101010 ; Border-bottom : 2px Solid #409f89 ; Position : Fixed ; Top : 0 ; Left : 0 ; _ Position : Absolute ; _ Top : Expression (documentelement. scrolltop ); }