Используя “нижнюю часть: выражение (0 + …”; для IE 6 Фиксированное Расположение
Это кажется, что я просто пропускаю некоторый синтаксис или понимаю его превратно, но на 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 ответ
Не существует такого свойства, как scrollBottom .
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 ...!
Я лично по-прежнему не стал бы использовать выражение ни для чего, даже для взлома только 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>