bootstrap фиксированный заголовок при прокрутке вниз

Question

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

Раздел, который я хотел бы придерживаться сверху, выглядит следующим образом.

<div class="area-top clearfix" > 
    <div class="pull-left header"> 
    <h3 class="title"><i class="icon-group"></i>Dashbord</h3> 
    </div><!--.header--> 
    <ul class="inline pull-right sparkline-box"> 
    <li class="sparkline-row"> 
     <h4 class="blue"><span> Cover Designs</span> 4</h5> 
    </li> 
    <li class="sparkline-row"> 
     <h4 class="green"><span> Video Trailers</span> 5</h5> 
    </li> 
    <li class="sparkline-row"> 
     <h4 class="purple"><span> Web Banners</span> 5</h5> 
    </li> 
    </ul> 
</div><!--.area-top--> 

и я пытался до сих пор, чтобы обернуть, что в другой DIV с navbar navbar-fixed-top классов. Но это выстрелило в верхнюю часть и совпадало с содержимым, которое нужно увидеть.

Я также попытался использовать простой css, добавив position:fixed; к текущему div, но это испортит хлебные кладки, которые я кладу под ним, потому что он вынимает его из потока.

Есть ли способ выполнить это только с помощью css. Я знаю, что могу сделать взлом с jquery, но в моей команде я только отвечаю за css.

Answer 1

положение: фиксированный способ пойти сюда. Можете ли вы применить высоту к div, который хотите исправить, и применить маржу к панировочным сухарям?

.area-top{ position:fixed; height:2em; } 

.breadcrumbs { margin-top: 2.2em; }