Kaydırılan bir öğe içinde sahte bir öğe nasıl sabit tutulur?

Question

nasıl bu etkiyi elde edebilirsiniz:

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

ben bir başlık olarak veri etiketini kullanmanız gerekir:

.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%; 
} 

Bu result olduğunu. Sorun şu ki, kaydırma yaptığınızda :before öğesi de kaydırır. Bu elemanı sabit tutmanın bir yolu var mı? Farklı varyasyonları denedim ama işe yaramayacağım.

Teşekkür

Answer 1

bu deneyin:

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

Seti position: fixed kaydırma aşağıdakilerden elemanı tutmak ve sonra da üst öğesi olarak aynı genişlikte sözde elemanı tutmak için width: inherit ayarlayın.

Keman referansı: http://jsfiddle.net/audetwebdesign/r8aNC/2/