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

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);

}