跨游览器的position：fixed解决方案及实例

        今天是本人第一次分享博客，本来是想很早分享 但是一直没有时间 今天恰好有点时间 心情也不是很糟 所以借这个机会来分享下自己的一些经验！希望能帮助大家解决碰到类似的问题，当然也是为了自己将来的一些积累！现在分享的是"跨游览器的position：fixed"这个属性,我们知道标准游览器都支持这个属性，唯有IE6不支持这个属性！现在以一个实例来分享！大家常见的就是“淘宝团购”经常会有底部导航条的问题，就是底部有一个导航条 当滚动条滚动时，他并不会随着滚动条滚动 而是一直固定在底部的某个位置上！在标准游览器下 这是正常显示 当滚动条滚动时 他们会一直在底部，但是在IE6下 会有问题 他不会动 当滚动条滚动时，他会一直留在当前的位置 直到消失

简单代码实例：

<div class="fixed">
             <ul class="fixed-list">
                 <li><a href="#top1">白羊座</a></li>
                    <li><a href="#top2">金牛座</a></li>
                    <li><a href="#top4">双子座</a></li>
                    <li><a href="#top5">巨蟹座</a></li>
                    <li><a href="#top7">狮子座</a></li>
                    <li><a href="#top8">处女座</a></li>
                    <li><a href="#top10">天枰座</a></li>
                    <li><a href="#top11">天蝎座</a></li>
                    <li><a href="#top13">射手座</a></li>
                    <li><a href="#top14">摩羯座</a></li>
                    <li><a href="#top16">水瓶座</a></li>
                    <li><a href="#top17">双鱼座</a></li>
                </ul>
                <div id="ckepop" class="ckepop2">
                <a href="http://www.jiathis.com/share/" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis wb-share" target="_blank" ></a>
        <a href="#" οnclick="addFav()" class="stow-active"></a>
    </div>

 

 

.fixed{ background:url(img/nav.jpg) no-repeat; width:950px; height:101px; margin-left:16px;position: fixed; bottom:0px; *position:absolute;*top:expression(eval(documentElement.scrollTop+document.documentElement.offsetHeight-101)); overflow:hidden; *margin-left:10px;}
html,html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
.fixed-list{ width:810px; height:96px; margin:3px 0 0 20px; overflow:hidden;}
.fixed-list li{ width:67px; height:96px; overflow:hidden; float:left;}
.fixed-list li a{ width:67px; height:96px; display:block; overflow:hidden; text-indent:-99999px;}

 

解决IE6的问题就是加了一些这样的代码*position:absolute;*top:expression(eval(documentElement.scrollTop+document.documentElement.offsetHeight-101)); overflow:hidden; *margin-left:10px;  就可以解决问题 但是还有一些在IE6 7 bug问题 就是底部导航滚动时 会一直抖动！所以可以用这个代码 就可以实现html,html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}

 

当然这些代码设计到收藏和分享  所以干脆把收藏和分享的代码 也放进来

<script type="text/javascript" src="http://v1.jiathis.com/code/jia.js" charset="utf-8"></script>
<script type="text/javascript">
function  addFav() {   //加入收藏夹 
  if  (document.all) { 
  window.external.addFavorite('http://taobao.obuy.cn/', '台湾馆2011鞋包新品发布 第8期'); 
 } 
  else   if  (window.sidebar) { 
 window.sidebar.addPanel('台湾馆2011鞋包新品发布 第8期', 'http://taobao.obuy.cn/',  "" ); 
 } 
   } 
 function SetHome(obj){ 
  try{ 
   obj.style.behavior='url(#default#homepage)'; 
   obj.setHomePage('http://taobao.obuy.cn/2011_fashion/clothing_15/index.html'); 
  }catch(e){ 
   if(window.netscape){ 
    try{ 
     netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); 
    }catch(e){ 
     alert("抱歉，此操作被浏览器拒绝！\n\n请在浏览器地址栏输入“about:config”并回车然后将[signed.applets.codebase_principal_support]设置为'true'");
    }; 
   }else{ 
    alert("抱歉，您所使用的浏览器无法完成此操作。\n\n您需要手动将'http://taobao.obuy.cn/2011_fashion/clothing_15/index.html/'设置为首页。"); 
   }; 
  }; 
 }; 
</script>