JQUERY&CSS top and bottom fixed floating toolbar compatible IE6

It is now common to see some websites (such as Sina Weibo and petals) that have navigation bars or toolbars pinned to the top of the page or elsewhere. This way of layout, the user can easily click and "exposure", not each time you have to drag the page to a specific location to click or see.

In fact, this way of layout is very early, but there is no such an opportunity to promote open it. Do not complicate, as long as set a small property "position:fixed" can be completed, the most critical of all is to be compatible with IE6 only.

First, let's look at the HTML code, isn't it super simple? Here is just a simple framework, the actual application, as long as the desired element is added to the area within the line.

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>