让IE6支持position:fixed的方法,CSS expression与JavaScript eval讲解
做吸顶效果或是固定效果时,使用position:fixed无非是最方便的,可是万恶的IE6是没有fixed这个属性值的,而我们要使IE6能够像fixed一样固定在浏览器中的某个位置,使用onscroll改变top值是一个方法,但如果滚轮滚的快,会出现卡闪烁情况。而如高级浏览器如果也这样用,那显然有失大雅,除非JS中判断浏览器版本。但是在这里笔者要讲解的是使用CSS完成fixed效果。
千言万语不及实例一个:

以上是笔者在IETester下测试IE6的fixed,注意看滚动条。其中导航采用的是position:fixed。
核心代码如下:
.nav { /* nav为导航栏 */
position:fixed;
_position: absolute;
top:;
_top:expression(eval(documentElement.scrollTop));
background: #FAA;
}
使用到了hack技术,下划线所代表的属性只有IE6以下识别。(因为只有IE6以下不支持fixed,所以特殊处理)
以上效果即可实现IE6下的fixed效果。而要理解_top:expression(eval(documentElement.scrollTop));不太容易,需要理解expression及eval的含义及用法,也是下面要讲解的内容。
expression为IE特有的属性,支持IE5及以上版本,用来在CSS中书写JavaScript代码,也就是说expression的括号内可以是一段JavaScript代码。
eval表示执行字符串内容的语句或表达式,并返回其结果。
用法:eval(codes);
参数:
- codes -- 字符串形式的表达式或语句
返回值:
- 如果没有参数,返回undefined
- 如果有返回值将返回此值,否则返回undefined
- 如果为表达式,返回表达式的值
- 如果为语句返回语句的值
- 如果为多条语句或表达式返回最后一条语句的值
了解expression及eval后,_top:expression(eval(documentElement.scrollTop));就不难理解了。documentElement.scrollTop为IE下获取滚动条的位置,而top值就相当于滚动条距离顶部的位置。如果scrollTop值改变,_top也就相应改变。
而为什么要使用eval呢?因为documentElement.scrollTop实际就是一条语句,并没有返回值,相当于在JS中执行了a=1后没执行任何操作。而我们要拿到documentElement.scrollTop值就需要将其返回,而只需要使用eval即可。
这样一来,所有浏览器器都可以有fixed的效果了,但是你会发现IE6下滚动鼠标滚轮时仍然会出现闪烁现象,这是因为当滚动条滚动或浏览器大小改变时,IE6奇葩的渲染引擎会重置所有内容并重画页面,因此会出现振动或闪烁的问题。而使用backgroune-attachment:fixed;添加至html或body会强制页面重画前先加载CSS,因为重画前处理的CSS,也就是重画前你的表达式就已经改变了,不像之前的重画之后才改变。这样当你鼠标滚动的时候就不会出现闪烁的现象了。这样就完全达成了fixed的效果。代码如下:
body { _background: url(about: blank) fixed}
总结:
IE6下不能实现fixed,因此使用absolute模拟fixed,因此需要使用JS。而只针对IE6进行处理,可在CSS中通过IE特有的expresstion写JavaScript,从而实时改变top值达到模拟fixed的效果。而IE6滚动或调整浏览器大小则重载CSS,因此使用在body中使用background-attachment:fixed使页面重新渲染前加载CSS。
代码:
body {_background: url(about:blank) fixed}
.nav {
position: fixed;
_position: absolute;
top:;
_top: expression(eval(documentElement.scrollTop));
// top值为想要固定定位的位置,设置left同理,设置right与bottom需要通过scrollLeft及scrollTop进行计算,如下注释
// 固定左:_left:expression(eval(documentElement.scrollLeft));
// 固定右:_left:expression(eval(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth));
// 固定下:_top:expression(eval(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight));
}
以上就是IE6下解决fixed方法的完美方案。如有问题或疑问请留言。
让IE6支持position:fixed的方法,CSS expression与JavaScript eval讲解的更多相关文章
- IE6不支持position:fixed的解决方法
解决IE6不支持position:fixed的方法,非常简单,具体调用请参考下面: /*让position:fixed在IE6下可用! */ .fixed-top /* 头部固定 */{positio ...
- 完美解决IE6不支持position:fixed的bug
示例代码: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" cont ...
- js完美解决IE6不支持position:fixed的bug
详细内容请点击 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" co ...
- 修正IE6不支持position:fixed的bug(转)
众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天我做自己的博客模板的时候,遇到了这个问题.当时就简单的无视了IE6— ...
- 解决IE6不支持position:fixed属性
最近在优化网站浮动广告时候遇见了IE6不支持position:fixed属性.上网收集了一下解决方案 比较好的方案就是利用css表达式进行解决 补充:CSS Expression (CSS 表达式), ...
- 解决IE6不支持position:fixed;的问题
在网页设计中,时常要用到把某个元素始终定位在屏幕上,即使滚动浏览器窗口也不会发生变化. 一般我们会使用position:fixed来进行绝对固定,但IE6并不支持position:fixed属性,所以 ...
- 让IE6也支持position:fixed
众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天遇到了这个问题.当时就简单的无视了IE6,但是对于大项目或商业网站, ...
- 解决ie6不支持position: fixed;导致无法滚动的办法
<div id="im" style="top: 100px; position: fixed; left: 5px; border: 3px solid #006 ...
- IE6下position:fixed不支持问题及其解决方式
IE6有诸多奇葩,不支持position:fixed就是当中之中的一个.所以在做一些比方固定在顶部或者底部或者固定元素的效果时须要考虑兼容IE6的这个问题.解决方式是用Ie6的hack. *html ...
随机推荐
- jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释
因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...
- SVG图像技术摘要
该公司今天没有,研究了最近流行SVG技术,发现,随着css3不断流行,和浏览器技术的发展,SVG网站将取代大量的图片,成为主流站点图片展示. AI是我们经常使用的矢量图编辑器,如今AI能够直接另存SV ...
- Android采用canvas绘制各种图形
canvas通俗的说就是一个帆布,我们可以用刷子paint,就此随机抽签显卡. 原理: 能够canvas视Surface替代或接口.图形绘制Surface向上.Canvas封装了全部的绘制调用. 通过 ...
- Scan IP relocate/failover其它段后不能ping通过
或手动集群重启单个节点srvctl relocate scan_listener后.群集网络段ping IP,VIP.SCAN IP正常.其他段ping SCAN IP 不通.其原因是,该路由ARP表 ...
- 使用eclips发展java当闪回的问题
近期開始android的开发学习.当然要先从java入手了.我选择eclips作为开发的IDE,在測试java代码例子时,假设我的代码是能够出现系统自己主动代码补齐时eclips就会立马闪退. 刚開始 ...
- paip.自适应网页设计 同 响应 与设计的原理的差and实践总结
paip.自适应网页设计 同 响应 与设计的原理的差and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...
- C++在设计和使用智能指针
为一个C++用户的.使用指针可以算的上是常态,但在使用过程中.多的时间,可能是由于new要么malloc对象,上次忘记的释放结束(我会犯这样一个错误).内存泄露. 而此时智能指针可能能够帮助我去解决问 ...
- 通达OA web页面与精灵显示内容更新后不一致的问题
前一段就发现有这种问题.就是在开发的电话查询里更新的信息,可是在精灵对话窗体上显示的还是原来的信息.这样导致从新开发入口更新信息就不能使用.一開始还以为是厂家升级,变更了存储的表结构.感觉下载近期的升 ...
- 如何解决Ora-04031错误(转)
诊断并解决ORA-04031 错误 当我们在共享池中试图分配大片的连续内存失败的时候,Oracle首先清除池中当前没使用的所有对象,使空闲内存块合并.如果仍然没有足够大单个的大块内存满足请求,就会产生 ...
- JAVA深入研究——Method的Invoke方法(转)
在写代码的时候,发现Method可以调用子类的对象,但子类即使是改写了的Method,方法名一样,去调用父类的对象也会报错,虽然这是很符合多态的现象,也符合java的动态绑定规范,但还是想弄懂java ...