<div class="curtain">
  <div class="invert">
    <h2>Section title</h2>
  </div>
</div>

:root {
  --minh: 98vh;
  --color1: wheat;
  --color2: midnightblue;
}
.curtain {
  /** create the "split" background **/
  background-image: linear-gradient(
    to bottom,
    var(--color2) 50%,
    var(--color1) 50%
  );
}

/** 添加额外的空间到底部(需要这个“粘性”效果)  **/
.curtain::after {
  content: "";
  display: block;
  min-height: var(--minh);
}
.invert {
  /**让内容具有粘性 **/
  position: sticky;
  top: 20px;

  /** 将内容与对比效果混合 **/
  mix-blend-mode: difference;

  /** 设置内容 **/
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  min-height: var(--minh);
}

h2 {
  /** set the color of the text **/
  color: var(--color1);
}