首页 > 代码库 > ie6使用expression模拟fixed定位

ie6使用expression模拟fixed定位

2024-08-05 20:31:21   218人阅读

 

<!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定位


联系
我们