Как сделать так, чтобы содержимое отображалось под фиксированным элементом DIV?

Question

Мое намерение состоит в том, чтобы создать меню в верхней части страницы, которое остается в верхней части страницы, даже когда пользователь выполняет прокрутку (как, например, недавняя функция 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;, и это не помогло.

Answer 1

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

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

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;
}

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

Это работает, смещая пространство, котороебыл бы занят nav div, но, как и position: fixed;, он был удален из потока документов.

---

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

Answer 2

Если высота вашего меню является переменной (для отзывчивости или потому, что она загружается динамически), вы можете установить верхнее поле в том месте, где заканчивается фиксированный 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/), которая выходит за рамки этого с фиксированным навигационным меню и заголовком, пытаясь сделать этот пример полезным.

Answer 3

Только что поборолся с этим и не любил некоторые «хакерские» решения, я обнаружил, что это полезно и чисто:

Answer 4

У меня только что была эта проблема, и это было мое решение:

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

Настройте высоту вашего плавающего меню.Если вы точно не знаете, что это div, вы можете использовать * вместо div.Это все действительный CSS2.

Answer 5

Мне понравился ответ grdevphl на Javascript лучше всего, но в моем собственном случае использования я обнаружил, что использование height() в вычислениях все еще оставляло небольшое совпадение, поскольку не учитывало отступы.Если вы столкнулись с той же проблемой, попробуйте вместо этого outerHeight(), чтобы компенсировать отступы и границы.

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

Answer 6

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

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

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

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

Та же проблема, если вы пролистываете страницы, строки "«упасть» в нижней части порта просмотра.

У кого-нибудь есть реальное решение для ЭТОЙ проблемы?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот страница в cNet , которая работает с Chrome и FF - так что жеони делают?

Еще тестирование с Chrome показывает, что при прокрутке он не может полностью отобразить нижнюю строку.Только часть строки, которая была внизу, видна при прокрутке, поэтому все еще нужно исправить.

Answer 7

Я только что добавил padding-top в div под nav.Надеюсь, поможет.Я новичок в этом.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;
}

Answer 8

Оберните содержимое меню другим 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 */
}

Answer 9

#nav{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    margin: 0 auto;
    z-index: 9999;
    background-color: white;
}

Answer 10

Вот адаптивный способ сделать это с помощью jQuery.

 $(window).resize(function () {
      $('#YourRelativeDiv').css('margin-top', $('#YourFixedDiv').height());
 });