luxy.jsの慣性スクロールとposition:fixedを両方実装したい

luxy.jsを使用し、慣性スクロールを実装しました。
しかし、背景画像のposition:fixedが効かなくなってしまいました。

.conceptは、スクロール量と比例して白色の背景色が浮かび上がってくる仕様です。

両方を実装する方法をご教示いただきたいです。
よろしくお願いいたします。

html
1    <div class="wrapper">
2      <div class="mv" id="mv"></div>
3      <section class="concept">
4        <div class="conceptBg" id="concept"></div>
5      </section>
6    </div>

css
1  .wrapper {
2    position: relative;
3
4    &::after {
5      position: absolute;
6      content: "";
7      width: 100vw;
8      height: 100vh;
9      left: 0;
10      top: 0;
11      background: url(../img/top/bg-mv.jpg) center center / cover no-repeat;
12      z-index: -10;
13
14      @include mq(sp) {
15        background: url(../img/top/sp/bg-mv.jpg) center center / cover no-repeat;
16      }
17    }
18  }
19
20  .mv {
21    height: 100vh;
22  }
23
24  .concept {
25    position: relative;
26    z-index: 5;
27
28    .conceptBg {
29      position: absolute;
30      left: 0;
31      top: 0;
32      width: 100%;
33      height: 100%;
34      background: #fff;
35      opacity: 0;
36      z-index: -10;
37    }
38  }

js
1window.addEventListener('scroll', () => {
2  const r = mv.getBoundingClientRect();
3  let ratio = -r.bottom * 4 / r.height;
4  concept.style.opacity = ratio;
5});