博瑞博客

青春是一个充满活力的季节,即便是我们失去了天使的翅膀,只要我们还有一颗青春的心,那么我们的生活依然能够如阳光般灿烂!......
现在位置:首页 > HTML5 > Javascript > jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6

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>



评论一下分享本文赞助博瑞

赞助博瑞X

扫码赞助博瑞
联系站长
博瑞博客
挤眼亲亲咆哮开心想想可怜糗大了委屈哈哈小声点右哼哼左哼哼疑问坏笑赚钱啦悲伤耍酷勾引厉害握手耶嘻嘻害羞鼓掌馋嘴抓狂抱抱围观威武给力
提交评论

清空信息
关闭评论
7788
77882016-01-30 11:58回复
#2
签到成功!签到时间:2016年1月30日 11:58:08,每日签到,生活更精彩!
very168
very1682016-01-30 11:56回复
#1
签到成功!签到时间:2016/1/30 上午11:56:46,每日签到,生活更精彩!