解决IE不支持position:fixed问题

最新推荐文章于 2020-06-21 08:40:38 发布

lxmgfd

最新推荐文章于 2020-06-21 08:40:38 发布

阅读量598

点赞数

分类专栏： js 文章标签：浏览器

本文链接：https://blog.csdn.net/lxmgfd/article/details/84232717

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏


//样式
<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>

以上代码所达到的效果如下图：
刚开始：
[img]http://dl.iteye.com/upload/attachment/0069/4408/1412b8e5-274c-3e4f-a503-9ef203591465.png[/img]

浮动后：

[img]http://dl.iteye.com/upload/attachment/0069/4410/2445cb00-9a84-374d-987a-748b4f6a6ced.png[/img]

个人测试过了，在IE6和火狐下没问题。

lxmgfd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决IE不支持position:fixed问题

[code="java"]//样式.tr-fixed-ff { position: fixed; left: 1%; top: 0px; width: 98%; /* IE6改为绝对定位，并通过css表达式根据滚动位置更改top的值 */ _position: absolute; _top: expression(eval(docume...
复制链接

扫一扫

专栏目录