Geek Answers Handbook

How to save a pseudo-element fixed in a scrollable element?

How can I get this effect:

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

I need to use a data tag as a header:

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

This is the result . The problem is that when scrolling, the :before element also scrolls. Is there a way to keep this item fixed. I tried different options, but can't make it work.

thanks

+7
source share
2 answers

Try the following:

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

Set position: fixed to prevent the element from scrolling, and then set width: inherit so that the pseudo-element has the same width as the parent element.

Link to the script: http://jsfiddle.net/audetwebdesign/r8aNC/2/

-3
source

For browsers supporting position: sticky

 .prettyprint { margin: 0 0 0 0.5%; border-left: 2px solid #ce8f80; overflow: auto; position: relative; width: 300px; } .prettyprint:before { position: sticky; left: 0; content: attr(data-codetitle); background: #ce8f80; display: block; width: 100%; } 
 <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)); } } </code> </pre>

0
source

More articles:


All Articles