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 the data tag as a heading:
.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 you scroll, the :before
element scrolls as well. Is there a way to keep this element fixed. I tried different variations but I cant get it to work.
Thanks
And it is simply by adding the CSS property overflow: hidden; on the element you want to prevent the scroll.
Use position: fixed instead of position: absolute .
An element with position:fixed is fixed with respect to the viewport. It stays where it is, even if the document is scrolled.
The answer is no.
For browsers that supports 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With