IE6 fixed的完美解决方案


Posted in Javascript onMarch 31, 2011

第一种方法:纯CSS
目前网上有的比较多的是这种解决方案(纯CSS):

html{overflow:hidden;} 
body{height:100%;overflow:auto;} 
#rightform form{position:absolute;right:30px;top50px;}

这个方法有一个bug未解决:在IE6下会把所有position:absolute都变成“浮动”的元素;还有使用js方法滚动滚动条时会出现对象闪烁,如下方法结合了CSS和js的办法,解决了以上的问题。

<!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=gb2312" /> 
<title>IE6 fixed</title> 
<style type="text/css"> 
* 
{ 
margin: 0px; 
padding: 0px; 
} 
body { 
_background-image: url(about:blank); /*用浏览器空白页面作为背景*/ 
_background-attachment: fixed; /* prevent screen flash in IE6 确保滚动条滚动时,元素不闪动*/ 
} 
#topNav { 
width: 980px; 
z-index: 100; /*设置浮动层次*/ 
overflow: visible; 
position: fixed; 
top: 50px; /* 其他浏览器下定位,在这里可设置坐标*/ 
_position: absolute; /*IE6 用absolute模拟fixed*/ 
_top: expression(documentElement.scrollTop + 50 + "px"); /*IE6 动态设置top位置*/ 
/* documentElement.scrollTop 设置浮动元素始终在浏览器最顶,可以加一个数值达到排版效果 */ 
background-color:#0000FF; 
height: 31px; 
} 
.show{ 
position:absolute; 
top:500px; 
left:400px; 
border:#ff0000 1px solid; 
} 
</style> 
</head> 
<body> 
<div class="jd_menu" id="topNav">1111</div> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<div class="show">show</div> 
</body> 
</html>

只实现了垂直方向的fixed。若要实现水平方向的fixed,设置_left:expression(documentElement.scrollLeft + "px");

利用给<body>设置固定的背景,防止滚动条滚动时的闪动;如果<body>中要设置滚动的背景而产生冲突,可以把代码写在html选择器里面,如:

html { 
_background-image: url(about:blank); 
_background-attachment: fixed; /* prevent screen flash in IE6 */ 
} 
body { 
background-image: url(1.jpg); 
background-attachment: scroll; 
}

第二种方法 JavaScript
<!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=utf-8" /> 
<style type="text/css"> 
body{ margin:0px; padding:0px; font-size:12px; line-height:22px;} 
p{ margin:0px; padding:36px;} 
.float2{ position:absolute; padding:26px; border:#999999 3px solid; background-color:#3399FF; right:200px; top:200px;} 
.fixed{ position:absolute; right:60px; top:100px; border:#666666 3px solid; background-color:#CCCCCC; padding:26px;} 
</style> 
<script language="javascript" type="text/javascript"> 
window.onload=function(){ 
var n=100; //top值 
var obj=document.getElementById("fixed"); //position:fixed对象 
window.onscroll=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';} 
window.onresize=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';} 
} 
</script> 
<title>position_fixed测试</title> 
</head> 
<body> 
<p>测试内容.........</p> 
<p>测试内容.........</p> 
<p>测试内容.........</p> 
<p>测试内容.........</p> 
<p>测试内容.........</p> 
<p>测试内容.........</p> 
<p>测试内容.........</p> 
<p>测试内容.........</p> 
<p>测试内容.........</p> 
<p>测试内容.........</p> 
<p>测试内容.........</p> 
<p>测试内容.........</p> 
<p>测试内容.........</p> 
<p>测试内容.........</p> 
<p>测试内容.........</p> 
<div class="float2">浮动的内容2</div> 
<div class="fixed" id="fixed">我的位置是固定的!拉动滚动条看效果。</div> 
</body> 
</html>

ie6对postion:fixed的完美解决方案
今天去一老外站看到了这他站上的十分平滑但却没有js,好奇,原来。。巧妙啊,分享下,相对而言比较节省资源。但效果好,使用方便,兼顾w3c。哈哈
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]><link rel="stylesheet" href="ie-stuff.css" type="text/css" media="screen"/><![endif]-->
ie-stuff.css
#footer { 
position: absolute; 
bottom: auto; 
clear: both; 
top:expression(eval(document.compatMode && 
document.compatMode=='CSS1Compat') ? 
documentElement.scrollTop 
+(documentElement.clientHeight-this.clientHeight) - 1 
: document.body.scrollTop 
+(document.body.clientHeight-this.clientHeight) - 1); 
}
Javascript 相关文章推荐
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
Seajs的学习笔记
Mar 04 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
Nov 12 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
js禁止表单重复提交
Aug 29 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 Javascript
HTML DOM的nodeType值介绍
Mar 31 #Javascript
setTimeout和setInterval的区别你真的了解吗?
Mar 31 #Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 #Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 #Javascript
使用jquery为table动态添加行的实现代码
Mar 30 #Javascript
jquery 查找select ,并触发事件的实现代码
Mar 30 #Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 #Javascript
You might like
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
PHP文件上传类实例详解
2016/04/08 PHP
document.compatMode介绍
2009/05/21 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
铁路工务反思材料
2014/02/07 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
用python开发一款操作MySQL的小工具
2021/05/12 Python
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
Python内置的数据类型及使用方法
2022/04/13 Python
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL