Мое намерение состоит в том, чтобы создать меню в верхней части страницы, которое остается в верхней части страницы, даже когда пользователь выполняет прокрутку (как, например, недавняя функция Gmail, в которой используются часто используемые кнопки, прокручиваемые пользователем вниз, что позволяет их для выполнения операций над сообщениями без необходимости прокрутки вверх страницы).
Я также хотел бы, чтобы содержимое под указанным меню отображалось под ним - в настоящее время оно отображается за ним.
Я стремлюсь к чему-то вроде этого:
+________________________+
| MENU | <--- Fixed menu - stays at top even when scrolling.
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+
| CONTENT BEGINS |
| HERE |
| |
| |
| |
| |
| |
| |
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+ <--- Bottom of page.
Я надеюсь, что в верхней части меню не будет перемещаться, и оно останется в верхней части страницы, даже когда пользователь прокручивает страницу вниз. Я также рассчитываю, чтобы основной контент начинался под меню, когда пользователь находится вверху страницы, но когда пользователь прокручивает страницу вниз, не имеет значения, переходит ли меню поверх контента.
Резюме:
- Я хочу иметь меню с фиксированной позицией вверху страницы, которое следует за пользователем при прокрутке.
- Контент должен появляться НИЖЕ под меню, ТОЛЬКО когда пользователь находится вверху страницы.
- Когда пользователь прокручивает страницу вниз, меню может перекрывать содержимое.
Может кто-нибудь объяснить, как этого добиться?
Спасибо.
UPDATE:
Код CSS:
#floatingMenu{
clear: both;
position: fixed;
width: 85%;
background-color: #78AB46;
top: 5px;
}
HTML код:
<div id="floatingMenu">
<a href="http://www.google.com">Test 1</a>
<a href="http://www.google.com">Test 2</a>
<a href="http://www.google.com">Test 3</a>
</div>
В настоящее время я могу заставить меню отображаться в верхней части страницы по центру, поместив его внутри моего container div. Тем не менее, содержание идет за меню. Я установил clear: both;, и это не помогло.