Position:fixed в Internet Explorer

Пятница, 11 Декабрь 2009

 

Как то раз было необходимо на веб странице использовать position:fixed для формы обратной связи которая выезжает из правой стороны окна при клике на кнопку (jQuery). При этом у формы задается такой CSS:

 

#contactForm {   
  color:#FFFFFF;   
  left:0;   
  margin-left:-400px;   
  height:450px;   
  margin-top:-160px;   
  overflow:hidden;   
  position:fixed;   
  top:200px;   
 width:390px;   
 z-index:99; 
}

 

При этом в Opera, FF, Safari отображают этот блок как нужно, фиксируют его расположение относительно верхней точки окна. Но если посмотреть в эту страницу в IE (в любом) то данный фокус работать не будет! Этот блок будет зафиксирован относительно верхней точки контейнера в котором он находится (body), тем самым сдвинув все блоки которые идут после него на величину своей высоты, и никакого эффекта скольжения содержимого страницы под этим блоком вы не увидите.

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

 

#contactForm {
  position: absolute;
  top: expression(document.getElementsByTagName( 'body' )[0].scrollTop +200+ "px");
  width:390px;
  z-index:99;
  color:#FFFFFF;
  left:0;
  margin-left:-400px;
  overflow:hidden;
}

 

Таким образом блок позиционируется абсолютно но координата, по которой он позиционируется, пересчитывается с помощью expression. И еще для того чтобы этот блок не дрожал при прокрутке, а плавно скользил над всем содержимым страницы, необходимо для тега body добавить такие стили:

 

body {
  background: url('fakeimg.gif') no-repeat;
  background-attachment: fixed;
}

 

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

 

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->



На случай сли DOCTYPE будет определен, следует использовать такой Expression:

#contactForm {top: expression(15+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');}

 

Метки:

Комментарии 

 
anonim Пятница, 06 Январь 2012

Здравствуйте!
Хорошая статья.
Есть проблема изображения виджетов, видел у друзей на IE 6 , а у меня IE 6 не устанавливается , наверное, из-за windows7.
Css:
position: fixed;
z-index: 1000;
margin-left: -60px;
_______________ _____________
как сделать перерасчет для IE 6 ?
заранее спасибо!

 

 
 
anonim Суббота, 07 Январь 2012

Александр, как сделать вычисление отступа от верха экрана используя expression, показано в статье. У вас же проблема как я понимаю в том что вы не видите результаты своей работы в IE6.
Для этого можете использовать Multiple IE или IETester.

 

 
 
anonim Понедельник, 23 Январь 2012

Спасибо!

 

 
 
anonim Воскресенье, 12 Май 2013

Спасибо, мил человек!

 

 

Добавить комментарий