Использование «bottom: expression (0+ ...;») для IE 6 Fixed Positioning - PullRequest
1 голос
/ 28 июля 2010

Кажется, что я просто пропускаю какой-то синтаксис или неправильно понимаю, но в таблице стилей, специфичной для ie6, это фиксирует его в верхней части порта просмотра и остается фиксированным, несмотря на прокрутку:

top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 

Но это не фиксирует его на дне таким же образом:

bottom: expression(0+((e=document.documentElement.scrollBottom)?e:document.body.scrollBottom)+'px'); 

Есть идеи?

1 Ответ

2 голосов
/ 28 июля 2010

Нет такого свойства как scrollBottom.

bottom - это расстояние между нижним краем позиционируемого элемента и нижним краем ограничивающего блока. Предполагая, что элемент не находится внутри каких-либо других позиционированных элементов, это начальный содержащий блок, практически эффективный начальный видовой экран.

Поэтому, когда область просмотра прокручивается вниз от своей начальной (верхней) позиции, позиция bottom должна стать отрицательной , чтобы переместить ее вниз, чтобы соответствовать:

// set from script. This is much more reliable than sniffing for
// scrollTop being zero. If your page has a Standards Mode doctype,
// which in this century it really should, then you don't need this,
// you can just always use document.documentElement.
//
var root= document.compatMode==='CSS1Compat'? document.documentElement : document.body;

/* then: */
top: expression(root.scrollTop+'px');

/* or: */
bottom: expression(-root.scrollTop+'px');

Однако есть еще одна ошибка IE6, когда установка стиля bottom абсолютно позиционированного элемента фактически связана с текущей позицией области просмотра вместо начальной позиции области просмотра. Таким образом, на самом деле то, что вы установили бы bottom, было бы 0 всегда, даже если оно уже было установлено на 0 ...!

Лично я по-прежнему не использовал бы expression ни для чего, даже для взлома только в IE6. Это довольно ненадежно, так как не всегда может сказать, когда нужно пересчитать. Для меня я обычно не вижу пересчет выражения на свитке; есть также некоторые операции изменения размера, масштабирования текста или DOM, которые изменяют размеры документа, которые не вызывают перерасчет.

Лучше поймать onscroll и onresize из скрипта, чтобы вызвать репозицию, и добавить более медленный поллер setInterval, чтобы обновить его для других случаев, которые нельзя отловить из событий.

Пример кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <style type="text/css">
        body { margin: 0; }
        #tools {
            position: fixed; z-index: 9;
            bottom: 0; left: 0; width: 100%; height: 24px;
            background: silver;
        }
    </style>
</head>
<!--[if lte IE 6]><body class="ie6"><![endif]-->
<!--[if gte IE 7]><!--><body><!--<![endif]-->
    <div id="tools">...</div>
    ...

    <script type="text/javascript">
        // IE6 position: fixed fix
        //
        function fixFixed(element, isbottom) {
            var root= document.compatMode==='CSS1Compat'? document.documentElement : document.body;
            function setPosition() {
                if (isbottom)
                    element.style.top= (root.scrollTop+root.clientHeight-element.offsetHeight)+'px';
                else
                    element.style.top= root.scrollTop+'px';
            }
            element.style.position= 'absolute';
            window.attachEvent('onscroll', setPosition);
            window.attachEvent('onresize', setPosition);
            window.setInterval(setPosition, 5000);
        }

        if (document.body.className==='ie6')
            fixFixed(document.getElementById('tools'), true);
    </script>
</body></html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...