解决IE不支持position:fixed问题

lxmgfd

浏览: 78985 次
性别:
来自: 珠海

最近访客更多访客>>

MR.wangxw

youcp999

liuxiao723846

风吹雨打风

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

浏览器

//样式
<style>
.tr-fixed-ff {
    position: fixed;
  	left: 1%;
  	top: 0px;
  	width: 98%;
  	/* IE6改为绝对定位，并通过css表达式根据滚动位置更改top的值 */
	_position: absolute;
	_top: expression(eval(document.documentElement.scrollTop));
}

.tr-fixed-ie {
    position: fixed;
  	left: 1%;
  	top: 0px;
  	/* IE6改为绝对定位，并通过css表达式根据滚动位置更改top的值 */
	_position: absolute;
	_top: expression(eval(document.documentElement.scrollTop));
}
</style>
//脚本
<script type="text/javascript">

//判断浏览器的脚本，直接修改别人的代码，拿来主义哈哈。
function getOs()
{
   var OsObject = "";
   if(navigator.userAgent.indexOf("MSIE")>0) {
        return "MSIE";
   }
   if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
        return "Firefox";
   }
  
}

//使用jquery，对我要进行浮动的table里面的第一行进行样式的添加和移除。
$(document).ready(function(){
	$(window).scroll( function() { 
		if($(window).scrollTop()>=95){//第一行tr相距top的距离为95
			if(getOs() == "MSIE"){
				$("#tr_scroll").addClass("tr-fixed-ie");	
			} else{
				$("#tr_scroll").addClass("tr-fixed-ff");
			}
		} else{
			if(getOs() == "MSIE"){
				$("#tr_scroll").removeClass("tr-fixed-ie");	
			} else{
				$("#tr_scroll").removeClass("tr-fixed-ff");
			}
		}
	});
});
</script>

<body>
<table id="tr_scroll"  width="100%" border="0" align="center" cellpadding="0" cellspacing="1" class="table_gray">
  <tr class="td_gray" align="center">
    <td width="7%">日期</td>
    <td width="24%" height="20">工作任务</td>
    <td width="5%">任务说明</td>
    <td width="6%">分配人</td>
    <td width="9%" class="td_padding_lr">开始日期</td>
    <td width="9%">结束日期</td>
    <td width="4%">优先级</td>
    <td width="6%">计划工时</td>
    <td width="6%">实际工时</td>
    <td width="8%">协助人员</td>
    <td width="5%">完成情况</td>
    <td width="5%">未完成原因</td>
    <td width="6%">状态</td>
  </tr>
 </table>

</body>

以上代码所达到的效果如下图：
刚开始：