做吸顶效果或是固定效果时,使用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讲解的更多相关文章

  1. IE6不支持position:fixed的解决方法

    解决IE6不支持position:fixed的方法,非常简单,具体调用请参考下面: /*让position:fixed在IE6下可用! */ .fixed-top /* 头部固定 */{positio ...

  2. 完美解决IE6不支持position:fixed的bug

    示例代码: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" cont ...

  3. js完美解决IE6不支持position:fixed的bug

    详细内容请点击 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" co ...

  4. 修正IE6不支持position:fixed的bug(转)

    众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天我做自己的博客模板的时候,遇到了这个问题.当时就简单的无视了IE6— ...

  5. 解决IE6不支持position:fixed属性

    最近在优化网站浮动广告时候遇见了IE6不支持position:fixed属性.上网收集了一下解决方案 比较好的方案就是利用css表达式进行解决 补充:CSS Expression (CSS 表达式), ...

  6. 解决IE6不支持position:fixed;的问题

    在网页设计中,时常要用到把某个元素始终定位在屏幕上,即使滚动浏览器窗口也不会发生变化. 一般我们会使用position:fixed来进行绝对固定,但IE6并不支持position:fixed属性,所以 ...

  7. 让IE6也支持position:fixed

    众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天遇到了这个问题.当时就简单的无视了IE6,但是对于大项目或商业网站, ...

  8. 解决ie6不支持position: fixed;导致无法滚动的办法

    <div id="im" style="top: 100px; position: fixed; left: 5px; border: 3px solid #006 ...

  9. IE6下position:fixed不支持问题及其解决方式

    IE6有诸多奇葩,不支持position:fixed就是当中之中的一个.所以在做一些比方固定在顶部或者底部或者固定元素的效果时须要考虑兼容IE6的这个问题.解决方式是用Ie6的hack. *html ...

随机推荐

  1. CVE-2014-4113:飓风熊猫(HURRICANE PANDA)Win64bit提起权0day破绽

    飓风熊猫被觉得是原产于中国.主要针对基础设施公司的先进攻击者.我们知道它们除了拥有0day漏洞外.还有其它的三种本地特权提升漏洞.我们知道飓风熊猫使用的是"ChinaChopper" ...

  2. 介绍4种HTML5 Canvas库

    1.bHive.js Library http://www.bhivecanvas.com/ bHive能创建丰富的用户体验.动画.游戏,能够使开发更简单. demo: http://www.bhiv ...

  3. 微信oauth获取用户的信息页面授权

    參考链接(请在微信client中打开此链接体验) Scope为snsapi_base https://open.weixin.qq.com/connect/oauth2/authorize?appid ...

  4. SQL Server 2005------函数

    原文:SQL Server 2005------函数 SQL Server 2005支持用户自定义函数和内置系统函数,根据返回值类型又分为标量函数和表值函数. 1.标量函数标量函数:返回单个数据值,返 ...

  5. NSIS:安装、卸载时检查程序是否正在运行

    原文 NSIS:安装.卸载时检查程序是否正在运行 如果我们要安装或升级的程序正在运行,文件肯定会替换不成功,以下代码可以提示用户结束正在运行的程序. 需要使用插件FindProcDLL.dll,下载路 ...

  6. 采用shell脚本统计代码的行数

    刚毕业那会儿有一次去台湾公司面试,我问多行代码怎么写.我从来没有想过这个问题,粗略计算,.惊叹:大概几十万行不行. 最近整理资料,看着eclipse左边全面上市,我觉得这个东西.代码共同拥有的行倒底总 ...

  7. mysql及powerdesigner的初次使用

    原文:mysql及powerdesigner的初次使用 MYSQL的下载与安装: 下载与安装指导教程: http://jingyan.baidu.com/article/597035521d5de28 ...

  8. SpringMVC上传下载

    springmvc上传和下载功能 写在一个简单的示例在线基准码 1.导入的必要性jar包:ant.jar.commons-fileupload.jar.connom-io.jar. 当然spring ...

  9. SSIS从理论到实战,再到应用(1)----创建自己的第一个包

    原文:SSIS从理论到实战,再到应用(1)----创建自己的第一个包 其实,如果你使用sql2008的导出导入工具的时候,你就已经在使用包了. 目标:使用sql2008 导入导出工具,导入excel数 ...

  10. 微信公众平台企业号验证接口、回调 PHP版

    微信公众平台企业号验证接口.回调 PHP版,本人为了解决这个企业号的验证和发送消息的问题,整整研究了几天时间,由于微信企业号刚推出来,网上资料太少了!后来在一些朋友的帮助下和本人重复调试完好下,最终整 ...