Можно ли сделать фиксированный заголовок с максимальной шириной?

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

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


css responsive-design css-position
person Ryan    schedule 15.10.2015    source источник
comment
Вы можете установить фиксированное положение, а сверху, слева и справа — 0. Установите поля и отступы на 0. Также установите высокий z-индекс, чтобы он всегда был сверху.   -  person Adam Milecki    schedule 15.10.2015
comment
Разве это не было бы больше похоже на ширину: 100%? Я хочу max-width:900px, чтобы ширина была ограничена.   -  person Ryan    schedule 15.10.2015
comment
Тогда не устанавливайте левое или правое значения. Установите максимальную ширину на 900 и левое/правое поля на авто.   -  person Adam Milecki    schedule 15.10.2015

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете прикрепить свой заголовок к верхней части страницы, используя position:fixed; и top:0;.

https://jsfiddle.net/yxuk5guh/2/

#header {
    top: 0;
    position: fixed;
    left:0;
    max-width: 500px;
    height: 50px;
    background-color: blue;
}
#content {
    height: 1800px;
}
person GibboK    schedule 15.10.2015
comment
Мне нужно, чтобы синий заголовок придерживался левого и правого полей, как текст. Спасибо, что посмотрели это. - person Ryan; 16.10.2015
comment
Я хочу внести уточнение. Мне нужно, чтобы синий заголовок придерживался левого и правого полей, когда ширина браузера меньше максимальной ширины. Видите, как заголовок переходит в левое и правое поле? Когда ширина браузера больше максимальной ширины, он работает так, как я хочу. - person Ryan; 16.10.2015

arrow_upward
0
arrow_downward

Используйте фиксированную позицию с верхним, левым, правым значением 0. Затем используйте поле влево/вправо автоматически. Добавьте ширину 100% и примените максимальную ширину. Не забудьте большой z-индекс.

.navbar {
    position: fixed;
    top: 0;
    z-index: 1000;
    max-width: 900px;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

http://jsfiddle.net/pa2xxxjn/1/

person Adam Milecki    schedule 15.10.2015
comment
Очень близко, но мне нужно, чтобы синяя часть прилегала к краю тела, потому что мне нужно, чтобы край синего всегда совпадал с краем зеленого. - person Ryan; 15.10.2015
comment
@Ryan, решает ли это вашу проблему jsfiddle.net/pa2xxxjn/2? В основном установите навигационную панель и контент так, чтобы они имели одинаковую верхнюю границу. - person GibboK; 15.10.2015
comment
@GibboK Спасибо, что заглянули ко мне. Нет, это не так. Я имел в виду левое и правое поле. Мне просто нужно, чтобы синий оставался вне левого и правого поля, как зеленый. - person Ryan; 16.10.2015

arrow_upward
0
arrow_downward

Вам нужно что-то подобное?

HTML

<div class='fixed-top'>
    <h1 align='center'>Example Fixed Top Header</h1>
</div>
<div class='container'>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>

CSS

.fixed-top {
    left: 0;
    margin: 0 auto;
    max-width: 200px;
    position: fixed;
    right: 0;

    background-color: blue;
   }
.container{
    padding-top:200px;
 height: 1800px;   
}

http://jsfiddle.net/grk6petn/

person Bak    schedule 15.10.2015