фиксированный заголовок содержимого заголовка ниже

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

Я попытался добавить «margin-top: 55px;» в контейнер, содержащий список элементов, но при этом скрывает полосу прокрутки за заголовком, что не очень приятно смотреть. Как я могу отобразить заголовок и список, если это не мешает?

Любая помощь была бы очень признательна.

body.campaign-body { height: 100%; overflow-y: scroll; } 
 
.container.campaign-header { position: fixed; 
 
    z-index: 1000; background: #000; width: 100%; height: 55px; color:#fff;""} 
 
.container.scroll-campaign-list { /*margin-top: 55px;*/ }

<body class="campaign-body"> 
 
    <div class="container campaign-header"> 
 
    <div class="row admin-header"> 
 
     <div class="header-title"> 
 
      <h4 class="white-txt header-name">LISTING</h4> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="container scroll-campaign-list" id="campaigns-list"> 
 
    <div class="row campaigns"> 
 
     <div class="twelve columns list-items"> 
 
      <h5 class="white-txt campaign-name">Blah blah</h5> 
 
      <p class="campaign-question grey-txt">Blah blah</p> 
 
     </div> 
 
    </div> 
 
    <hr> 
 
    <div class="row campaigns"> 
 
     <div class="twelve columns list-items"> 
 
      <h5 class="white-txt campaign-name">Blah blah</h5> 
 
      <p class="campaign-question grey-txt">Blah blah</p> 
 
     </div> 
 
    </div> 
 
    <hr><div class="row campaigns"> 
 
     <div class="twelve columns list-items"> 
 
      <h5 class="white-txt campaign-name">Blah blah</h5> 
 
      <p class="campaign-question grey-txt">Blah blah</p> 
 
     </div> 
 
    </div> 
 
    <hr><div class="row campaigns"> 
 
     <div class="twelve columns list-items"> 
 
      <h5 class="white-txt campaign-name">Blah blah</h5> 
 
      <p class="campaign-question grey-txt">Blah blah</p> 
 
     </div> 
 
    </div> 
 
    <hr><div class="row campaigns"> 
 
     <div class="twelve columns list-items"> 
 
      <h5 class="white-txt campaign-name">Blah blah</h5> 
 
      <p class="campaign-question grey-txt">Blah blah</p> 
 
     </div> 
 
    </div> 
 
    <hr><div class="row campaigns"> 
 
     <div class="twelve columns list-items"> 
 
      <h5 class="white-txt campaign-name">Blah blah</h5> 
 
      <p class="campaign-question grey-txt">Blah blah</p> 
 
     </div> 
 
    </div> 
 
    <hr><div class="row campaigns"> 
 
     <div class="twelve columns list-items"> 
 
      <h5 class="white-txt campaign-name">Blah blah</h5> 
 
      <p class="campaign-question grey-txt">Blah blah</p> 
 
     </div> 
 
    </div> 
 
    <hr><div class="row campaigns"> 
 
     <div class="twelve columns list-items"> 
 
      <h5 class="white-txt campaign-name">Blah blah</h5> 
 
      <p class="campaign-question grey-txt">Blah blah</p> 
 
     </div> 
 
    </div> 
 
    <hr><div class="row campaigns"> 
 
     <div class="twelve columns list-items"> 
 
      <h5 class="white-txt campaign-name">Blah blah</h5> 
 
      <p class="campaign-question grey-txt">Blah blah</p> 
 
     </div> 
 
    </div> 
 
    <hr> 
 
</div> 
 
</body>

источник

2016-05-23 user1038814

Почему бы не дать 'container.campaign-header' верхний атрибут' т.е. верхний: 0; '. Тогда, если вы дадите '.container.scroll-campaign-list'' margin-top' – jagmitg

, вы попробовали 'padding-top'? Я забываю, какой из них использует полосу прокрутки ... В любом случае вам может понадобиться сделать свой прокручиваемый контент внутри контейнера, а затем сделать то, что я называю контейнером «push» выше этого. Установите их абсолютно), и вы должны быть хорошими – ntgCleaner

Во-первых, сбросить Запас тела:

body { 
    margin: 0; 
}

Далее, установите обивка-топ (не рентабельность-топ) для scroll-campaign-list:

.container.scroll-campaign-list { 
    padding-top: 50px; 
}

источник

2016-05-23 14:03:07 WorkWe

У меня добавленный «блокиратор» делает это раньше:

HTML:

<div class="blocker"> </div>

CSS:

/* Matches your header height */ 
.blocker { height: 55px; };

Все, что вы делаете это положить невидимый DIV под заголовком

Fiddle: https://jsfiddle.net/btv5bjfd/

источник

2016-05-23 14:04:09 theblindprophet

Я разместил ваш код в скрипке, чтобы сделать, с ним немного легче работать. Ниже приведена ссылка на скрипку с результатами, посмотрите и скажите, если это то, что вы искали.

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

.container.campaign-header { position: fixed; 
    z-index: 1000; background: #000; width: 100%; height: 55px; color:#fff; top:0;} 
.container.scroll-campaign-list {margin-top: 75px; }

https://jsfiddle.net/m4fw7mk1

источник

2016-05-23 14:10:06

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

Проверьте руководство пользователя This Fiddle.

Убедитесь, что нулевой запас и отступов на вашем теле

* { 
    margin:0; 
    padding:0; 
}

Затем убедитесь, что ваш заголовок фиксирован к вершине и оставил

.campaign-header { 
    top:0; 
    left:0; 
}

Тогда ваш список прокрутки кампании станет контейнером с фиксированным содержимым, который составляет 100% высоты минус высота заголовка, расположенного в нижней части заголовка, и позволяет прокручивать

.scroll-campaign-list { 
    position:fixed; 
    top:55px; 
    left:0; 
    width:100%; 
    height:calc(100% - 55px); 
    overflow:scroll; 
}

Here is a fiddle с содержанием в нем

источник

2016-05-23 14:11:48 ntgCleaner

-1

Я думаю, что лучше иметь разные классы. Поэтому я удалил класс .container.

body.campaign-body { height: 100%; overflow-y: scroll; } 
 
    .campaign-header { position: fixed; top: 0; 
 
     z-index: 1000; background: #000; width: 100%; height: 55px; color:#fff;""} 
 
    .scroll-campaign-list { margin-top: 95px; }

<body class="campaign-body"> 
 
     <div class="campaign-header"> 
 
     <div class="row admin-header"> 
 
      <div class="header-title"> 
 
       <h4 class="white-txt header-name">LISTING</h4> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="scroll-campaign-list" id="campaigns-list"> 
 
     <div class="row campaigns"> 
 
      <div class="twelve columns list-items"> 
 
       <h5 class="white-txt campaign-name">Blah blah</h5> 
 
       <p class="campaign-question grey-txt">Blah blah</p> 
 
      </div> 
 
     </div> 
 
     <hr> 
 
     <div class="row campaigns"> 
 
      <div class="twelve columns list-items"> 
 
       <h5 class="white-txt campaign-name">Blah blah</h5> 
 
       <p class="campaign-question grey-txt">Blah blah</p> 
 
      </div> 
 
     </div> 
 
     <hr><div class="row campaigns"> 
 
      <div class="twelve columns list-items"> 
 
       <h5 class="white-txt campaign-name">Blah blah</h5> 
 
       <p class="campaign-question grey-txt">Blah blah</p> 
 
      </div> 
 
     </div> 
 
     <hr><div class="row campaigns"> 
 
      <div class="twelve columns list-items"> 
 
       <h5 class="white-txt campaign-name">Blah blah</h5> 
 
       <p class="campaign-question grey-txt">Blah blah</p> 
 
      </div> 
 
     </div> 
 
     <hr><div class="row campaigns"> 
 
      <div class="twelve columns list-items"> 
 
       <h5 class="white-txt campaign-name">Blah blah</h5> 
 
       <p class="campaign-question grey-txt">Blah blah</p> 
 
      </div> 
 
     </div> 
 
     <hr><div class="row campaigns"> 
 
      <div class="twelve columns list-items"> 
 
       <h5 class="white-txt campaign-name">Blah blah</h5> 
 
       <p class="campaign-question grey-txt">Blah blah</p> 
 
      </div> 
 
     </div> 
 
     <hr><div class="row campaigns"> 
 
      <div class="twelve columns list-items"> 
 
       <h5 class="white-txt campaign-name">Blah blah</h5> 
 
       <p class="campaign-question grey-txt">Blah blah</p> 
 
      </div> 
 
     </div> 
 
     <hr><div class="row campaigns"> 
 
      <div class="twelve columns list-items"> 
 
       <h5 class="white-txt campaign-name">Blah blah</h5> 
 
       <p class="campaign-question grey-txt">Blah blah</p> 
 
      </div> 
 
     </div> 
 
     <hr><div class="row campaigns"> 
 
      <div class="twelve columns list-items"> 
 
       <h5 class="white-txt campaign-name">Blah blah</h5> 
 
       <p class="campaign-question grey-txt">Blah blah</p> 
 
      </div> 
 
     </div> 
 
     <hr> 
 
    </div> 
 
    </body>

источник

2016-05-23 14:21:42 MarioKart

Я взял -1, и я не понимаю причины. Вопроситель не объясняет все или достаточно. В будущем, вероятно, я не буду отвечать никому с таким профилем и именем изображения. – MarioKart

фиксированный заголовок содержимого заголовка ниже

ответ

Смежные вопросы