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

其实这样的布局方式很早就有,只是没有那么个契机推广开吧。做起来也不复杂,只要设置一个小小的属性“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:0pxpadding:0px;}
a{ text-decoration:noneoutline:none;}
a:hover{text-decoration:underline;}
 
/* 实例CSS */
html{ _background:url(about:blank);} /*阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求*/
body{ font-size:12pxfont-family:Arial,Tahoma,sans-serifcolor:#EEEEEEtext-align:centerbackground:#E2E2E2;}
#topToolbar{
    _display:none;
    width:100%height:40pxline-height:40px;
    background:#101010border-bottom:2px solid #409F89;
    position:fixedtop:-40pxleft:0;
    _position:absolute_top:0;
}
 
#bottomToolbar{
    width:100%height:40pxline-height:40px;
    background:#101010border-top:2px solid #409F89;
    position:fixedbottom:0left: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:80pxline-height:80px;
    background:#101010border-top:2px solid #409F89;
}
 
#content{
    width:880pxheight:1390pxline-height:18pxtext-align:left;
    margin:40px auto 80px autopadding:30px 50px;
    background:#FFF url(images/scaleplate.png) no-repeatborder: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:40pxline-height:40px;
    background:#101010border-bottom:2px solid #409F89;
    position:fixedtop:0left:0;
    _position:absolute_top:expression(documentElement.scrollTop);
}