Naprawiono nagłówek podczas przewijania w dół

Question

Pracuję w głównej strukturze administracyjnej bootstrap i mam główny nagłówek na górze strony, a następnie pod nagłówkiem poniżej. Próbuję zezwolić, aby ten nagłówek podrzędny został naprawiony na górze strony, gdy użytkownik przewinie w dół, aby mogli zawsze zobaczyć te informacje, ale mam trochę problemów.

Sekcja, którą chciałbym przykleić do górnej części wygląda następująco.

<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--> 

i próbowałem tak daleko, aby owinąć że w innym div z navbar navbar-fixed-top klas. Ale to wystrzeliło to na sam szczyt i nałożone na siebie treści, które trzeba zobaczyć.

Próbowałem również używać zwykłego css, dodając position:fixed; do bieżącego div, ale to miażdży kromki chleba, które pod nim leżę, ponieważ usuwa je z przepływu.

Czy jest tak, aby to osiągnąć za pomocą tylko css. Wiem, że mogę zrobić hack z jquery, ale w moim zespole jestem tylko odpowiedzialny za css.

Answer 1

pozycja: naprawiony to sposób na przejście tutaj. Czy możesz zastosować wysokość do elementu div, który chcesz naprawić i zastosować margines do bułki tartej?

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

.breadcrumbs { margin-top: 2.2em; }