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 相关文章推荐
强制设为首页代码
Jun 19 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
Python selenium 三种等待方式解读
2016/09/15 Python
Python生成随机密码的方法
2017/06/16 Python
Java分治归并排序算法实例详解
2017/12/12 Python
Python实现翻转数组功能示例
2018/01/12 Python
对python中的pop函数和append函数详解
2018/05/04 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
adidas美国官网:adidas US
2016/09/21 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
自荐信格式的六要素
2013/09/21 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
2015年团支书工作总结
2015/04/03 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang