Преобразовать фиксированное в относительное после полной прокрутки

Question

Я хочу изменить ширину изображения по мере его прокрутки вниз. Я не хочу использовать какие-либо библиотеки. Единственное, что я использую, это VueJs.

Это дочерний компонент, ширина изображения которого изменяется в зависимости от прокрутки.

<template>
  <div>
    <div>
      <div ref="movieImageContainer" class="image-container">
        <img ref="movieImage" :src="getImg" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MovieImage",

  props: {
    imageUrl: {
      type: String
    },
    scrollY: {
      type: Number
    }
  },

  data() {
    return {
      store: this.$store.state
    };
  },

  computed: {
    getImg() {
      return require("../../assets/" + this.imageUrl + ".jpg");
    }
  },

  watch: {
    scrollY(scrollY) {
      console.log("Scroll");
      let x = (this.$refs.movieImage.style.width = 280 - scrollY / 6);
      if (x >= 100) {
        this.$refs.movieImage.style.width = 280 - scrollY / 6 + "%";
      }
    }
  }
};
</script>

<style scoped>
p {
  font-size: 20px;
  line-height: 2;
}
img {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 280%;
}
.image-container {
  top: 0;
  width: 100%;
  height: 80vh;
  overflow: hidden;
}
</style>

Прокрутка передается как prop из родительского компонента.

<MovieImage 
    class="test" 
    v-if="store.component == 'MovieImage'"
    imageUrl="poster"
    :scrollY="scrollY"
     />

В JS родительского компонента я добавляю прослушиватель событий, который передает значение дочернему компоненту.

 mounted() {
    window.addEventListener("scroll", this.onScroll);
  },

  data() {
    return {
      store: this.$store.state,
      scrollY,
    };
  },
  methods: {
    onScroll() {
      this.scrollY = window.scrollY;
    },
  }

Это мой CSS родительского компонента

.test {
  position: fixed; 
  left:0;    
  top:0;     
  width:100vw;
}

Это результат, который я получаю - https://www.loom.com/share/33e521c9aaa24d95b64838467a19b06e Но я хочу, чтобы, когда изображение достигло финальной стадии (когда ширина равна 100% ) то изображение вместо того, чтобы фиксироваться, просто прокручивается как простое изображение. И я также хочу, чтобы текст под изображением не скользил под изображением, а сохранял фиксированное отступы между изображением и самим собой.