Блог

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

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

#html #css #responsive-design #fixed #fluid-layout

#HTML #css #адаптивный дизайн #исправлено #fluid-layout

Вопрос:

Я пытаюсь сделать заголовок / строку меню на этом веб-сайте статическим (фиксированным), чтобы он всегда присутствовал в верхней части экрана, а особенно длинный веб-сайт прокручивался «за» ним. Я делал это раньше на веб-сайтах с фиксированной шириной, но этот веб-сайт имеет плавную ширину, и я пока не смог этого сделать, не нарушая заголовок.

Может ли кто-нибудь потенциально сказать мне, где / что мне нужно отредактировать в моем CSS? Я считаю, что мне нужно добавить элемент position:fixed; где-нибудь, возможно, в этом разделе, но, похоже, это не достигает моей цели так же, как на веб-сайте с фиксированной шириной.

 .art-header
{
   margin:0 auto;
   background-repeat: no-repeat;
   height: 170px;
   position:relative;
   background-image: url('images/header.jpg');
   background-position: center top;
}

.custom-responsive .art-header
{
   background-image: url('images/header.jpg');
   background-position: center top;
}

.default-responsive .art-header,
.default-responsive #art-header-bg
{
   background-image: url('images/header.jpg');
   background-position: center center;
   background-size: cover;
}

.art-header-inner{
   position: relative;
   min-width: 840px;
   max-width: 1920px;
   width: 50%;
   z-index: auto !important;
   margin: 0 auto;
}

Комментарии:

1. Пожалуйста, поместите свой код на fiddle, это поможет понять ваш запрос

2. Невозможно ответить на этот вопрос без разметки, которая идет с CSS.

3. Итак, вы пытались position: fixed; , и это не сработало? Можете ли вы поместить это в jsfiddle ?

4. Вот скрипка — jsfiddle.net/8uZE5/2 — надеюсь, это работает достаточно хорошо, чтобы хотя бы поиграть с проблемой. Дайте мне знать, если я могу предоставить что-нибудь еще.

Ответ №1:

попробуйте это, объедините свой .art-header amp; .art-nav внутри div и классифицируйте fixed его следующим образом

 <div class="fixed">
    //div .art-header amp; nav .art-nav here
</div>

затем добавьте css для фиксированного

 .fixed {
    position: fixed;
    z-index: 100;
}

и сделайте некоторый запас для .art-sheet 

 margin-top: 241px; /*the height of the fixed div*/

вот JSFIDDLE