Есть ли способ сделать div фиксированным заголовком после его прокрутки в IE6?

Question

Хорошо, я знаю, я не люблю IE6 больше, чем вы. На самом деле, мне это может понравиться меньше, чем вам. Тем не менее, я застрял с этим.

По сути, я хочу точно такое же поведение, что и функция «показать содержимое страницы» в quirksmode , но в IE6. Это означает, что у меня есть div, который на первый взгляд кажется относительным. Затем, когда вы прокручиваете, непосредственно перед тем, как div выходит из поля зрения, он становится фиксированным. Когда вы прокручиваете обратно наверх, div не должен располагаться вверху окна, он должен вернуться туда, где он был в начале страницы.

Answer 1

Да - я делаю то же самое в проекте, который поддерживаю на своей работе с кубом. Вы можете использовать CSS-выражения и хак с фиксированным положением в таблице стилей только для IE6, чтобы заставить его работать:

/* The background-attachment: fixed smooths out the IE scrolling */
body {
   background: url(foo.gif) fixed;  
}

/* Adjust the 100 to whatever height you want 
   your container to start being fixed position at */
#fixedElement {
   position: absolute;
   left: 0; 
   top: expression(documentElement.scrollTop > 100 ? documentElement.scrollTop : 100);
}

Обратите внимание, что вышеупомянутый documentElement.scrollTop, если IE6 находится в стандартном режиме. Если вы находитесь в режиме причуд, вам нужно изменить его на document.body.scrollTop.

Редактировать: Использование текущей позиции прокручиваемого элемента

Если вы хотите сделать его динамичным и использовать текущую позицию элемента (избавьтесь от 100 в приведенном выше выражении), вы можете сделать это, протестировав позицию элемента, которая находится прямо на пороге, где Вы хотите начать прокрутку:

HTML

<div id="startScroll"></div>
<div id="fixedElement">
   Fixed scrolling content
</div>

CSS

#fixedElement{
   position: expression(document.getElementById('startScroll').offsetTop < documentElement.scrollTop ? "absolute" : "static");
   top: expression(documentElement.scrollTop);
}

Причина, по которой вы не можете протестировать сам #fixedElement, заключается в том, что, как только он начинает фиксироваться, вы теряете порог, при котором прокрутка должна останавливаться и запускаться.

Кроме того, # startScroll.offsetTop будет относительно его содержащего родителя, поэтому вам, возможно, придется добавить к нему константу, чтобы учесть это (т. Е., Скажем, он находится в контейнере #content, который на самом деле находится в 50 пикселях от вершины). самого экрана).