[CSSチュートリアル】タイトルを上部に配置するスティッキーレイアウトを実現するためのCSS

'cflags_cc!': [ '-fno-rtti' ] 

// Remember to set ref for each question, my ref is the id of each question

-- vue abbreviation ---
<div
  :ref="question.id"
  v-for="(question, index) of formData.questions"
  :key="index"
>


// I also did a sort to prevent jumbling problems
---- js -----
 this.topPositionArr = [];
  for (let key in this.$refs) {
      for (let idx in this.$refs[key]) {
        this.topPositionArr.push(this.$refs[key][idx].offsetTop);
      }
    }
    this.topPositionArr = [. .new Set(this.topPositionArr)];
    this.topPositionArrtopPositionArr = this.topPositionArr.sort(
      (a, b) => {
        return a - b;
      }
    );        

// Compatible with different viewers The offsetTop is taken differently for different viewers

handleScroll() {
    this.scrollTop = document.documentElement.scrollTop
  scrollTop? document.documentElement.scrollTop
  : document.body.scrollTop;
  
let scrollTop = this.scrollTop;
// the scrollTop of the first question remains unchanged, from the second question the scrollTop changes
this.topPositionArr.forEach((item, idx) => {
  if (idx > 1) {
    this.scrollTop = scrollTop + 220;
  }
  // Why do we do this? Because iE doesn't support sticky layouts, and we need a plugin to help with that
  if (this.scrollTop > item) {
    let elements = document.getElementById(`sticky${idx}`);
    stickyfill.add(elements);
  }
});
}

npm install stickyfill 
yarn add stickyfill

<div
  :id="`sticky${question.index}`"
  class="isSticky"
>

Introduce in the page you need.
<script src="path/to/stickyfill.min.js"></script>
var Stickyfill = require("stickyfill");
var stickyfill = Stickyfill();

See 3 above for details on how to do this
let elements = document.getElementById(`sticky${idx}`);
stickyfill.add(elements);