背景位置视口的高度会不断调整到某个滚动位置

Question

我正在尝试在某个滚动点上实现真正的视差效果。但是该特定部分的高度（#parallax）将根据我的rate变量的值进行调整。根据mdn，background-position CSS属性为每个背景图像设置初始位置。那么为什么高度会根据速率崩溃呢？ https://codepen.io/hackirme/details/YzPQwOg

 $(window).scroll(function () {
    parallax();
 });

 function parallax(){
    //  get the posiiton from the top of the window
    let scrolled = $(window).scrollTop();

    if (scrolled > $('#parallax').offset().top) {
        let rate = scrolled * 0.5;
      $('#parallax').css('background-position', 'center ' + rate + 'px');
    }
 }

<!-- Overlay section -->
    <section id="parallax" class="overlay-section">

            <div class="overlay-section-inner">
                <h3 class="overlay-section-title-sm">victory or death</h3>
                <h2 class="overlay-section-title-lg">Lorem ipsum dolor sit amet</h2>
                <p>
                    adipisicing elit. Tempora magnam deleniti atque labore hic totam
                    quisquam, odio obcaecati iste pariatur ullam minus. Numquam quaerat
                    voluptates, magnam ea beatae nostrum eius.
                </p>
            </div>

    </section>
    <!-- Overlay section end -->


.overlay-section {
    position: relative;
    background: url(../img/sylvanasw-eric-braddock.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    /* background-attachment: fixed; */
    height: 100vh;
}

.overlay-section-inner {
    color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: auto;
    max-width: 700px;
    /* padding: 10rem 0; */
}