现在常常能看到一些网站（如：新浪微博和花瓣）导航条或工具栏固定在网页的顶部或其他地方。这样的布局方式，能便于用户点击和“曝光率”，不用每次都要把网页拖动到某个特定位置才能点击或看到。

其实这样的布局方式很早就有，只是没有那么个契机推广开吧。做起来也不复杂，只要设置一个小小的属性“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>

DemoDownload

如果要像新浪微博那样，始终浮动固定在顶部，那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);
}