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 相关文章推荐
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
简单实现js放大镜效果
Jul 24 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 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写的简单留言本实例代码
2008/07/25 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
javascript new后的constructor属性
2010/08/05 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
Python判断Abundant Number的方法
2015/06/15 Python
全面了解python字符串和字典
2016/07/07 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
python实现狄克斯特拉算法
2019/01/17 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
Python爬虫开发与项目实战
2020/12/16 Python
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
彪马法国官网:PUMA法国
2019/12/15 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
总经理司机岗位职责
2014/02/06 职场文书
十佳护士获奖感言
2014/02/18 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
大学军训感言1500字
2014/03/09 职场文书
部队2014年终工作总结
2014/11/27 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
MySQL 数据类型详情
2021/11/11 MySQL