css 如何在滚动的元素中保持伪元素固定？

2j4z5cfb 于 2023-05-30 发布在其他

关注(0)|答案(2)|浏览(240)

如何获得这种效果：

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

我需要使用数据标签作为标题：

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

这是result。问题是，当您滚动时，:before元素也会滚动。有没有办法把这个元素固定下来。我试过不同的变化，但我不能让它工作。
谢谢

css

来源：https://stackoverflow.com/questions/15721753/how-to-keep-a-pseudo-element-fixed-within-a-scrolled-element

2条答案

按热度按时间

cngwdvgl1#

对于支持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）回复(0）举报 2023-05-30

vfhzx4xs2#

试试这个：

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

设置position: fixed以防止元素跟随滚动，然后设置width: inherit以保持伪元素与父元素的宽度相同。
小提琴参考：http://jsfiddle.net/audetwebdesign/r8aNC/2/

赞(0）回复(0）举报 2023-05-30

我来回答

css 如何在滚动的元素中保持伪元素固定？

2条答案

相关问题

热门标签

最新问答