码迷,mamicode.com
首页 > 编程语言 > 详细

让IE6支持position:fixed的方法,CSS expression与JavaScript eval讲解

时间:2014-08-11 00:05:01      阅读:373      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   java   使用   os   

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

bubuko.com,布布扣

  以上是笔者在IETester下测试IE6的fixed,注意看滚动条。其中导航采用的是position:fixed。
核心代码如下:

1 .nav {    /* nav为导航栏 */
2     position:fixed;
3     _position: absolute;
4     top:0;
5     _top:expression(eval(documentElement.scrollTop));
6     background: #FAA;
7 }

  使用到了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。

代码:

 1 body {_background: url(about:blank) fixed}
 2 
 3 .nav {
 4 
 5     position: fixed;
 6 
 7     _position: absolute;
 8 
 9     top: 0;
10 
11     _top: expression(eval(documentElement.scrollTop));    
12 
13     // top值为想要固定定位的位置,设置left同理,设置right与bottom需要通过scrollLeft及scrollTop进行计算,如下注释
14 
15     // 固定左:_left:expression(eval(documentElement.scrollLeft));
16 
17     // 固定右:_left:expression(eval(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth));
18 
19     // 固定下:_top:expression(eval(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight));
20 
21 }

  以上就是IE6下解决fixed方法的完美方案。如有问题或疑问请留言。

让IE6支持position:fixed的方法,CSS expression与JavaScript eval讲解,布布扣,bubuko.com

让IE6支持position:fixed的方法,CSS expression与JavaScript eval讲解

标签:des   style   blog   http   color   java   使用   os   

原文地址:http://www.cnblogs.com/wuyuchang/p/3903541.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!