Làm thế nào để giữ một phần tử giả được cố định trong một phần tử được cuộn?

Question

Làm thế nào tôi có thể nhận được hiệu ứng này:

<pre class="default prettyprint prettyprinted" data-codetitle="homepage.html" style=""><code> 
body{ 
    position: relative; 
    @include background(linear-gradient(left, lighten($me, 11%), lighten($me, 11%) 
    $half, $darkbackground $half, $darkbackground)); 
    color: $text; 
    width: 100%; 
    height: 100%; 
    @include breakpoint(baby-bear) { 
    @include background(linear-gradient(left, lighten($me, 11%), lighten($me, 11%) 
    45%, $darkbackground 45%, $darkbackground)); 
    } 
} 
</span></code></pre> 

tôi cần phải sử dụng thẻ dữ liệu như tiêu đề:

.prettyprint { 
    margin: 0 0 0 0.5%; 
    border-left: 2px solid #ce8f80; 
    overflow: auto; 
    position: relative; 
    width: 300px; 
} 
.prettyprint:before { 
    content: attr(data-codetitle); 
    background: #ce8f80; 
    display: block; 
    width: 100%; 
} 

Đây là result. Vấn đề là khi bạn cuộn, phần tử :before cũng cuộn. Có cách nào để giữ nguyên tố này không. Tôi đã thử các biến thể khác nhau nhưng tôi không thể làm cho nó hoạt động.

Cảm ơn

Answer 1

Hãy thử điều này:

.prettyprint:before { 
    content: attr(data-codetitle); 
    background: #ce8f80; 
    display: block; 
    position: fixed; 
    width: inherit; 
} 

Set position: fixed để giữ các phần tử từ sau khi di chuyển, và sau đó thiết lập width: inherit để giữ cho phần tử giả chiều rộng tương tự như các yếu tố phụ huynh.

Tham chiếu Fiddle: http://jsfiddle.net/audetwebdesign/r8aNC/2/