首页 > 代码库 > jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6
jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6
现在常常能看到一些网站(如:新浪微博和花瓣)导航条或工具栏固定在网页的顶部或其他地方。这样的布局方式,能便于用户点击和“曝光率”,不用每次都要把网页拖动到某个特定位置才能点击或看到。
其实这样的布局方式很早就有,只是没有那么个契机推广开吧。做起来也不复杂,只要设置一个小小的属性“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> |
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。