Исправлена ​​ошибка (что остается неизменным в окне прокрутки) Page блоки с помощью CSS только

Это сообщение может быть хорошим примером для фразы «Преподавание бабушки сосать яйца" ... Потому что это только основные CSS Stuff. Но для тех, кто, подобно мне, забывая, что это может быть благом. Я всегда думал, (я могу потерять свою работу за эти слова), можно было только, чтобы сохранить некоторые части HTML-содержимое страницы STATIC (то есть, его позиция остается как есть на прокрутки окна), используя смарт-скрипты, делая все эти научные Расчеты найти динамические позиции, захват window.scroll событий и настройка тайм-ауты и т.д.

Никогда не думал, что это может так просто, как это .... Здесь, в CSS / HTML ниже, у меня есть четыре стационарных блоков, один крепится к каждому extrimities на этой странице, сверху, справа, внизу и слева ... разумеется ... Вы можете выбрать одну или несколько, если нужно будет ...

CSS
. Статический {Дисплей: блок; г-индекс: 10; цвет: # FFFFFF; переполнение-х: скрытый; переполнение-й: скрытый; положение: ixed;
}
# {Содержание маржа: 100px 150px 160px 0px; границы: 1px твердых # e6e6e6}

# Обертка-т {верх: 0px; фон: # 33CC66, ширина: 100%, высота: 55 пикселей;}

# Обертка-л {топ: 80px; фон: # FF9966; высота: 300px; ширина: 150px; границы: 2px твердых # e6e6e6;}

# Обертка-б {вниз: 0px; фон: # 3333CC, ширина: 100%, высота: 55 пикселей;}

# Обертка-р {топ: 80px; фон: # 6666FF; высота: 300px; ширина: 140px; границы: 2px твердых # e6e6e6, справа: 0;}

HTML
<div id="contents"> Вы основное содержание страницы </ div>
<div id="wrap-b" class="static">
Статическое содержимое на страницу дно
</ Div>
<div id="wrap-t" class="static">
Статическое содержимое на страницы К началу
</ Div>

<div id="wrap-l" class="static">
Статическое содержимое на страницу оставили
</ Div>
<div id="wrap-r" class="static">
Статических материалах на стр. право
</ Div>

Посмотреть пример здесь wroking


Оставить комментарий

NDK дома | Выражая IT | Выражая неба | Выражая Penmenship | Выражая трепет | выразить себя