视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001 知道1 知道21 知道41 知道61 知道81 知道101 知道121 知道141 知道161 知道181 知道201 知道221 知道241 知道261 知道281
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
让IE6支持position:fixed的方法,CSSexpression与JavaScripteval讲解_html/css_WEB-ITnose
2020-11-27 15:54:38 责编:小采
文档

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

  以上是笔者在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 }

      

    下载本文
    显示全文
    专题