bootstrap fixed header beim runterscrollen

Question

Ich arbeite in der Kernadministrationsstruktur von bootstrap und habe eine Kopfzeile oben auf der Seite und dann eine Kopfzeile darunter. Ich versuche zuzulassen, dass der Sub-Header am oberen Rand der Seite repariert wird, wenn der Benutzer nach unten scrollt, damit er immer diese Informationen sehen kann, aber ich habe ein bisschen Ärger.

Der Abschnitt, den ich gerne an der Spitze bleiben würde, sieht so aus.

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

und ich habe versucht, so weit, dass mit den navbar navbar-fixed-top Klassen in einem anderen div zu wickeln. Aber das hat es sofort nach oben geschossen und den Content überlagert, der gesehen werden muss.

Ich habe auch versucht, css zu verwenden, indem ich position:fixed; zum aktuellen div hinzufüge, aber das vermasselt die Brotkrumen, die ich darunter gelegt habe, weil es es aus dem Fluss nimmt.

Gibt es sowieso, um dies mit nur CSS zu erreichen. Ich weiß, dass ich mit jQuery einen Hack machen kann, aber in meinem Team bin ich nur für das CSS zuständig.

Answer 1

Position: behoben ist der Weg, hier zu gehen. Kannst du dem div, das du reparieren willst, eine Höhe zuweisen und einen Rand auf die Breadcrumbs anwenden?

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

.breadcrumbs { margin-top: 2.2em; }