码迷,mamicode.com
首页 > 其他好文 > 详细

ie6使用expression模拟fixed定位

时间:2014-12-03 12:21:04      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:style   io   ar   os   使用   sp   java   on   文件   

 

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    html{

        _background:url(about:blank); /* 阻止IE6中闪动 , 把空文件换成about:blank , 减少请求 */

    }

    /* 固定定位图层 */

    .fixed {

        position:fixed;

        _position: absolute;

        width: 200px;

        height: 200px;

        background: red;

        top:0;

        left: 0;

        _top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);

        _left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.offsetWidth);

    }

    </style>

</head>

<body>

    <div class="fixed"></div>

    <div style="height:1500px"></div>

</body>

</htm>

 

IE5 及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript表达式关联起来,这里的CSS属性可以是元素固有的属性, 也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果。

 

以top为例:

documentElement.scrollTop   页面滚动条“卷”起来的高度值

documentElement.clientHeight  页面实际高度,包括padding

this.offsetHeight  元素实际高度,包括padding,scrollbar,border

documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight = bottom为0时,如果用top来实现应当取多少值

 

top:0; = _top:expression(documentElement.scrollTop);

bottom:0; = _top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);

left:0; = _left:expression(documentElement.scrollLeft);

right:0; = _left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.offsetWidth);

 

注:尽量避免使用这种方式,因为这会产生大量计算,计算量轻松过万,对浏览器性能损耗很大,浏览器极容易死掉。

 

ie6使用expression模拟fixed定位

标签:style   io   ar   os   使用   sp   java   on   文件   

原文地址:http://www.cnblogs.com/k13web/p/4139610.html

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