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

Question

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

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

Answer 1

Вам нужно что-то вроде этого?

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/

Answer 2

Используйте положение фиксируется сверху, слева, справа установлен на 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/

Answer 3

Вы можете наклеить на верхней части страницы ваш заголовок с помощью 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; 
}