Fix me, baby!

Опубликовано Опубликовано в рубрике CSS

Оригинальность внешнего вида страницы — залог хорошей конверсии. И одним из элементов, привлекающих к себе взгляды посетителей, является зафиксированный элемент. По сути — это элемент, который остаётся на экране в определённом месте даже при прокрутке страницы. Тут есть интересный пример реализации на основе банера под «Like».

Я не буду вдаваться в подробности украшательств Ваших банеров или других элементов. Поговорим о принциапах.

Во всех нормальных браузерах уже давно «прокатывает» следующий css-код

position: relative

Далее указывается положение на экране, как в случае с абсолютным позиционированием. Т.е. мы размещаем элемент по координатам top, right, bottom и left.

Но тут свою ехидную сущность вновь проявляет всеми любимый IE. Просто так его собратья до 7 версии не станут ничего фиксировать. Им понадобится вспомогательный скрипт. Студия товарища Лебедева рекомендует делать слудющую вставку:

1. с функцией eval():

top: expression(
    eval(document.body.scrollTop) + "px"
);

2. с массивом:

top: expression(
    document.getElementsByTagName("body")[0].scrollTop + "px"
);

3. с функцией parseInt():

top: expression(
    parseInt(document.body.scrollTop, 10) + "px"
);

Как видим, тут браузер динамически высчитывает размеры окна браузера и перепозиционирует элемент с каждым скроллом.

В браузерах IE, начиная с 7 версии, стоит вспомнить про так часто забываемое кодерами слово «валидность», которая настоятельно требует указание DOCTYPE в документе. Да-да, всё просто! Указав всего лишь одну строку в Вашем документе, Вы лишаете себя головной боли и получаете рабочий параметр fixed в IE, а также ещё один шанс на создание валидной страницы!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *