公告:本站提供编程开发方面的技术交流与分享,打造最佳教程网,希望能为您排忧解难!

CSS在线手册position:fixed 无效的解决方案

position:fixed 无效的解决方案

更新时间:2013-03-17 14:47:38 |

IE6本身是不支持position:fixed 

IE6以上版本(IE7、IE8)有时候会失效,主要原因是HTML头部没有加上<!DOCTYPE html>...

IE6可以通过JS配合解决实现类似效果,这里以jQuery为例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>IE6下演示相对浏览器定位-www.goodxyx.com</title>
</head>

<body>
<div style="height:1800px; border:solid 1px red;">
注意:这里只提供了一个解决方案,实际情况中可能会有一些细微的差别,请大家灵活运用。
</div>

<div id="baseS" style="position:absolute;float:left;top:300px;right:0;width:98px;border:solid 1px red; padding:5px; text-align:center;">
<a href="http://czyx.goodxyx.com/" style="color:orange;">IE6下演示相对浏览器定位</a>
</div>

<script src="http://i.goodxyx.com/public/js/jq.js"></script>
<script>
if('v'=='\v' && $.browser.version == '6.0'){ //如果是IE6就进行处理
var base = $("#baseS").offset().top;
$(window).scroll(function (){
$("#baseS").css({top :(base + $(window).scrollTop() +"px")});
//$("#baseS").animate({top :(base + $(window).scrollTop() +"px")},{ duration:500 , queue:false });//滑动效果
});
}else{
$("#baseS").css({'position': 'fixed'});
}
</script>
</body>
</html>

最佳教程网

最大的技术交流平台 www.goodxyx.com© CopyRight 2011-2013, All Rights Reserved

浙ICP备11033019号