Нет такого свойства как 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>