现在常常能看到一些网站（如：新浪微博和花瓣）导航条或工具栏固定在网页的顶部或其他地方。这样的布局方式，能便于用户点击和“曝光率”，不用每次都要把网页拖动到某个特定位置才能点击或看到。
其实这样的布局方式很早就有，只是没有那么个契机推广开吧。做起来也不复杂，只要设置一个小小的属性“position:fixed”便能完成，最关键的无不呼在于要兼容IE6而已。
首先我们来看HTML代码，是不是超简单？这里提供的只是一个简单的框架，实际应用的时候，只要把想要的元素添加东西就在这区域内加就行。
**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字...</``p``>`
`</``div``>`
`<``div` `id``=``"bottomToolbar"``>Fixed at the bottom of the Toolbar. By Bluesdream.com</``div``>`
**CSS CODE:**
`<style type=``"text/css"``>`
`/* 全局CSS*/`
`*{``margin``:``0px``; ``padding``:``0px``;}`
`a{ ``text-decoration``:``none``; ``outline``:``none``;}`
`a:hover{``text-decoration``:``underline``;}`
`/* 实例CSS */`
`html{ ``_background``:``url``(about:blank);} ``/*阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求*/`
`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 网页滚动的距离`
` ``document.body.clientHeight 网页可见区域高`
` ``this.offsetHeight 当前元素的高度`
` ``*/`
`}`
`#bottomToolbar a{ ``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();`
` ``//IE6 Expression方法和jquery animate方法同事使用会有问题，所以加个判断，简化下IE6下的显示方式.`
` ``if` `($.browser.msie && ($.browser.version == ``"6.0"``) && !$.support.style) {`
` ``if``( scrollTop >= headerH ){`
` ``topToolbar.show();`
` ``}``else` `if``( scrollTop < headerH ){`
` ``topToolbar.hide();`
` ``}`
` ``}``else``{`
` ``if``( scrollTop >= headerH ){`
` ``topToolbar.animate({ ``'top'``:0 });`
` ``}``else` `if``( scrollTop < headerH ){`
` ``topToolbar.animate({ ``'top'``:-40 });`
` ``}`
` ``};`
` ``});`
`});`
`</script>`
[Demo](http://www.bluesdream.com/case/jquery/jquery-css-fixed-toolbar/)[Download](http://www.bluesdream.com/case/jquery/jquery-css-fixed-toolbar/JqueryCssFixedToolbar.rar)
如果要像新浪微博那样，始终浮动固定在顶部，那JS部分就可以无视了，有没有都无所谓，直接改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);`
`}`