jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6
江湖 Javascript 2016-1-25 1547 2评论
现在常常能看到一些网站(如:新浪微博和花瓣)导航条或工具栏固定在网页的顶部或其他地方。这样的布局方式,能便于用户点击和“曝光率”,不用每次都要把网页拖动到某个特定位置才能点击或看到。
其实这样的布局方式很早就有,只是没有那么个契机推广开吧。做起来也不复杂,只要设置一个小小的属性“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:
/* 全局CSS*/ <style type="text/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>
- 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《博瑞博客》。
- 本文网址:http://blog.neacn.com/Javascript/3.html
- 上篇文章:PHP 5.2.17 For Linux 下载
- 下篇文章:没有了

77882016-01-30 11:58回复
#2

very1682016-01-30 11:56回复
#1