Подтвердить что ты не робот

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

Мое намерение состоит в том, чтобы создать меню в верхней части страницы, которое остается в верхней части страницы, даже когда пользователь прокручивает (например, последнюю функцию 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="#" onclick="location.href='http://www.google.com'; return false;">Test 1</a>
    <a href="#" onclick="location.href='http://www.google.com'; return false;">Test 2</a>
    <a href="#" onclick="location.href='http://www.google.com'; return false;">Test 3</a>
</div>

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

Этот div будет размещен между меню и содержимым и будет иметь ту же высоту, что и div меню, включая paddings.

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*/ в вашей обертке содержимого.

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

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

Я только что добавил padding-top в div ниже nav. Надеюсь, поможет. Я новичок в этом. С:

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

Ответ 7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Здесь страница cNet, которая работает с хром и ff - так что они делают?

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

Ответ 8

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

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

Ответ 9

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

Ответ 10

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

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

Ответ 11

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

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