http://www.cnblogs.com/lhj588/archive/2013/04/02/2994639.html

————————————————————————————————————————————————————————————

jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6

http://www.bluesdream.com

18

December

2012

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

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

转载于:https://www.cnblogs.com/cuizhf/p/5358017.html

相关资源：jQuery微信手机端底部弹出导航菜单列表代码