Pull to refresh

Position fixed IE6 + Drag-and-Drop

Website development *
Много было про то написано, да не суть…

Озадачился следующей задумкой: перетаскиваемый слой с фиксированным положением на экране, страница скролица — слой остаётся на месте. Как известно данная задумка на ура воплощается в FF, Opera, Google Chrome, но вот IE интеллигентно послал мою задумку в свою мусорную корзинку — при скролинге передвинутый слой сползал вместе со страницей.

Надо сказать, что варианты с вёрсткой, высотой 100% и т.п., подробно описанные в сети мне не подошли, потому как требовалась универсальность, чтобы слой мог юзаться с любыми дизайнами.

В итоге выбор пал на expression, что в данной ситуации вполне оказалось логичным. Прочитав все возможные доки по данной реализации пришёл к нескольким ключевым умозаключениям:

1. Перед объявлением <DOCTYPE ...> ставится любой пустой HTML-комментарий, валидатор на это не жалуется, а эксплорер перестаёт воспринимать этого доктайпа объявление. Это избавит от многих проблем.

2. Юзается следующая CSS конструкция в фиксируемом слое:
position:fixed; _position:absolute; top:0; _top:expression( eval(document.body.scrollTop) + 'px' );

3. Фильтры позволяют избавиться от подёргиваний фиксируемого слоя в IE:
if (document.body.filters) true;
Заметил совершенно случайно.

А теперь самое главное. Конструкция вполне себе стандартная, работает пока слой не переносится мышкой, после переноса — способность к фиксации пропадает. Может это уже кем-то сделано или где нибудь описано, в таком случае я просто плохо искал, но выход пришлось копать самому, вот как получилось…

Вместо равнения на топ скролинга, при котором слой постоянно остаётся на одной и той же абсолютной позиции, я стал подсовывать экспрешену значение отступа из cookie, в которых оно сохранялось при перетаскивании:

_top:expression( Math.round(my_class_cookies.get('POSY')) + Math.round(offsetParent.scrollTop) + 'px' );

my_class_cookies.get('POSY') — метод JavaScript класса, который просто забирает значение из куков. После всех манипуляций код выглядел примерно так:

Position fixed in IE6

Слой остаётся зафиксированным даже после перетаскивания. Посмотреть рабочую демку
Tags: position fixed iefixedie6 hackcss hackexpressiondrag-and-droplayer
Hubs: Website development
Total votes 28: ↑26 and ↓2 +24
Comments 48
Comments Comments 48

Popular right now