Как я могу сделать контент под неподвижным элементом div?

Мое намерение состоит в том, чтобы создать меню в верхней части страницы, которая остается в верхней части страницы, даже когда пользовательские прокрутки (например, недавняя функция Gmail, которая имеет широко- Используемые кнопки прокручиваются с пользователем так, чтобы он позволил им выполнять операции на сообщениях, не прокручиваясь до вершины страницы).

Я также хотел бы установить контент ниже указанного меню, чтобы появиться под ним - в настоящее время , оно появляется за этим.

Я нацелен на что-то подобное:

+________________________+
|          MENU          | <--- Fixed menu - stays at top even when scrolling.
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+
|     CONTENT BEGINS     |
|          HERE          |
|                        |
|                        |
|                        |
|                        |
|                        |
|                        |
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+   <--- Bottom of page.

Я надеюсь, что на вершине меню на вершине, который никогда не перемещается, и которые остаются в верхней части страницы, даже когда пользователь прокручивает. я Я также хочу, чтобы основной контент начнут под меню, когда пользователь находится в верхней части страницы, но ru Пользователь прокручивает вниз, то не имеет значения, если меню переходит на вершину содержимого.

Сводка:

  • Я хочу иметь фиксированное меню позиции в верхней части страницы, который следует пользователю при прокрутке.
  • Содержание должно появиться под меню, только когда пользователь находится в верхней части страницы.
    • Когда пользователь прокручивается вниз, меню может перекрывать содержимое.

Может кто-нибудь, пожалуйста, объясните, как это добиться этого?

Спасибо.

Обновление:

код 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>  

В настоящее время я могу получить меню, чтобы появиться в верхней части страницы и центрированным, размещая ее внутри моего контейнера DIV . Однако содержание идет за меню. У меня установлено Очистить: оба; , и это не помогло.

48
задан MusTheDataGuy 14 November 2018 в 01:26
поделиться