有什么方法可以将样式规则应用于仅在处于“粘性”状态的元素？

Question

当内容向下滚动到足以使它现在“粘”在“外部”顶部的位置时，是否有任何方法可以使<h1>标签变成红色 容器div？

    // Note this scss
    .outer {
      height: 500px;
      overflow: scroll;
    
      h1 {
        position: sticky;
        top: 30px;
    
        &:sticky { // Maybe something like this in an ideal world
          color: red;
        }
      }
    
      .inner {
        height: 1000px;
      }
    }

    <div class="outer">
      <h1>Contents</h1>
      <div class="inner"></div>
    </div>