bootstrap cố định tiêu đề khi di chuyển xuống

Question

Tôi đang làm việc trong cấu trúc quản trị cốt lõi của bootstrap và có một tiêu đề chính ở đầu trang và sau đó là một tiêu đề phụ bên dưới nó. Tôi đang cố gắng cho phép tiêu đề phụ đó sửa chữa ở đầu trang khi người dùng cuộn xuống để họ luôn có thể xem thông tin đó, nhưng tôi gặp một chút rắc rối.

Phần tôi muốn gắn vào phần trên trông như thế này.

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

và tôi đã thử cho đến thời điểm này trong một div khác với các lớp học navbar navbar-fixed-top. Nhưng điều đó bắn nó lên trên cùng ngay lập tức và chồng chéo nội dung cần được nhìn thấy.

Tôi cũng đã thử sử dụng đồng bằng css bằng cách thêm position:fixed; vào div hiện tại, nhưng điều đó làm rối loạn breadcrubms tôi đã đặt bên dưới nó bởi vì nó đưa nó ra khỏi dòng.

Có cách nào để thực hiện việc này chỉ với css. Tôi biết tôi có thể làm một hack với jquery, nhưng trong nhóm của tôi, tôi chỉ phụ trách css.

Answer 1

vị trí: cố định là cách để đến đây. Bạn có thể áp dụng một chiều cao cho div bạn muốn được cố định và áp dụng một lề để các breadcrumbs?

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

.breadcrumbs { margin-top: 2.2em; }