CSS - сделать контент под фиксированным элементом DIV

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

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

Я стремлюсь что-то вроде этого:--7-->

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

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

резюме:

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

может кто-нибудь объяснить, как этого достичь?

спасибо.

обновление:

код 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; и это не помогло.

8 ответов


что вам нужно, это дополнительный отступ для div (насколько я понял ваш вопрос).

этот div будет помещен между меню и содержимым и будет такой же высоты, как меню div, прокладки включены.

HTML-код

<div id="fixed-menu">
    Navigation options or whatever.
</div>
<div class="spacer">
    &nbsp;
</div>
<div id="content">
    Content.
</div>

в CSS

#fixed-menu
{
    position: fixed;
    width: 100%;
    height: 75px;
    background-color: #f00;
    padding: 10px;
}

.spacer
{
    width: 100%;
    height: 95px;
}

см. мой пример здесь.

это работает, компенсируя пространство, которое было бы занято навигационным div, но так как это position: fixed; Он был извлечен из документа поток.


предпочтительный способ достижения этого эффекта является использование margin-top: 95px;/*your nav height*/ на обертке содержимого.


Если ваша высота меню переменная (для отзывчивости или потому, что она загружается динамически), вы можете установить верхнее поле, где заканчивается фиксированный div. Например:

в CSS

.fixed-header {
    width: 100%;
    margin: 0 auto;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 999;
}

в JavaScript

$(document).ready(function() {
    var contentPlacement = $('#header').position().top + $('#header').height();
    $('#content').css('margin-top',contentPlacement);
});

HTML-код

...
<div id="header" class="fixed-header"></div>
<div id="content">...</div>
...

вот скрипка (https://jsfiddle.net/632k9xkv/5/) это немного выходит за рамки этого с фиксированным навигационным меню и заголовком в попытке, надеюсь, сделать этот полезный образец.


у меня просто была эта проблема, и это было мое решение:

#floatingMenu + * {
    margin-top: 35px;
}

отрегулируйте для высоты вашего floatingMenu. Если вы не знаете наверняка, что это div, то вы можете использовать *, а не div. Все это допустимо CSS2.


оберните содержимое меню другим div:

<div id="floatingMenu">
    <div>
        <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>

и CSS:

#floatingMenu {
    clear: both;
    position: fixed;
    width: 100%;
    height: 30px;
    background-color: #78AB46;
    top: 5px;
}

#floatingMenu > div {
    margin: auto;
    text-align: center;
}

и о Вашей странице под меню, вы можете дать ему заполнение сверху, а также:

#content {
    padding-top: 35px; /* top 5px plus height 30px */
}

Я только что добавил заполняющий верх к div под навигатором. Надеюсь, это поможет. Я новичок в этом деле. C:

#nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: url(../css/patterns/black_denim.png);
    z-index: 9999;
}

#container {
    display: block;
    padding: 6em 0 3em;
}

только что боролся с этим и не любил некоторые из" хакерских " решений, я нашел это полезным и чистым:

#floatingMenu{
  position: sticky;
  top: 0;
}

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

1.clear:both; вам не нужно использовать


для тех, кто предлагает использовать margin-top или padding-top для перемещения основного подразделения ниже фиксированного меню-вы, похоже, не тестируете его полностью.

Если вы установите поле или отступ, он будет прокручиваться со страницей, и вы потеряете строки-go try на этой странице

выглядит хорошо, не так ли? Выделите слово в нижней видимой строке и нажмите page-down-строка с выделенным словом, и несколько других строк, будут прокручиваться под фиксированной деление.

Margin-top или padding-top расположит основное деление ниже фиксированного деления, но все это упадет на его лицо, когда вы страница вниз или нажмите на полосу прокрутки, чтобы прокрутить одну высоту окна просмотра страницы.

та же проблема, если вы страница вверх, строки "отваливаются" в нижней части view-port.

У кого-нибудь есть реальное решение этой проблемы?

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

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

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

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

ответ-вы видите, что нижняя строка прокручивается, чтобы стать верхней строкой.

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

Если фиксированное деление становится выше высоты одной строки текста, они терпят неудачу и строки теряются.

единственные страницы, которые я видел, которые действительно работают должным образом, находятся на таких сайтах, как yahoo, и у меня нет ни времени, ни склонности, чтобы копаться в том, что много CSS, HTML и JavaScript на страницах, чтобы добраться до сути дела.

Итак-перейдите на эту страницу и посмотрите, можете ли вы внести изменения ("проверить" элементы и внести изменения в CSS правила), которые устраняют проблемы прокрутки.

Если можете, вернитесь и поделитесь своим открытием с world.

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

играть с высотой деления fix-сделать его достаточно коротким, так что только одна строка показывает, а затем играть с прокруткой. Затем сделайте его достаточно большим для двух строк, а затем трех и играйте с прокруткой. Вы увидите проблемы.

вот страница это должно работать, но это не-прочитайте самый последний комментарий - они описывают проблему по-другому, но это та же проблема

Я только что протестировал страницу снова в Chrome, и, похоже, она работает довольно удовлетворительно. С FF проблема существует. Еще не пробовал IE снова.

Так - чем отличается FF?

вот страница в cNet который работает с chrome и ff-так что же они делают?

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