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 相关文章推荐
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
JS中的变量作用域(console版)
Jul 18 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
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
PHP 验证登陆类分享
2015/03/13 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
php简单压缩css样式示例
2016/09/22 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
Jquery选择器 $实现原理
2009/12/02 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
python实现倒计时的示例
2014/02/14 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
比较基础的php面试题及答案-编程题
2012/10/14 面试题
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
市政施工员自我鉴定
2014/01/15 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
公路绿化方案
2014/05/12 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
世博会口号
2014/06/20 职场文书
公司财务部岗位职责
2015/04/14 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python