How to position the header at the top using CSS sticky layout

Application scenarios:

One of the new requirements is to do a questionnaire survey, which will inevitably involve many questions, and multiple people need to score under one question. This phenomenon will occur when sliding on the mobile phone, and you will forget the question when you swipe up. Therefore, after calculating a certain distance, the title needs to be positioned. Make the title that slides to the area always fixed at the top to facilitate scoring.

Solution:

1. The first thing that comes to mind is the fixed layout, which means that the title is fixed at the top of the screen when it reaches a certain distance. (It can be done, but the process is not very smooth)
2. Sticky layout

Sticky can meet this requirement very well, but compatibility (compatible with IE) needs to be considered.

Sticky implementation ideas:

1. First, you need to record the position of the slider and listen for scroll events:

window.addEventListener("scroll", this.handleScroll);

Remember to remove this event before the component is destroyed beforeDestroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }

2. Calculate the height of each question’s title from the top of the screen and form an array.

// Remember to set a 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"
>


// To prevent the disorder problem, I also performed a sorting ---- 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;
      }
    );        

3. Compare the distance monitored by the slide with the obtained title, and select the located title.

// Compatible with different browsers. Different browsers have different ways of obtaining offsetTop. handleScroll() {
    this.scrollTop = document.documentElement.scrollTop
  ? document.documentElement.scrollTop
  : document.body.scrollTop;
  
let scrollTop = this.scrollTop;
// The scrollTop of the first question remains unchanged, and the scrollTop of the second question changes this.topPositionArr.forEach((item, idx) => {
  if (idx > 1) {
    this.scrollTop = scrollTop + 220;
  }
  //Why do this? Because IE does not support sticky layout, we need a plug-in to assist if (this.scrollTop > item) {
    let elements = document.getElementById(`sticky${idx}`);
    stickyfill.add(elements);
  }
});
}

4. IE compatibility issues

Because IE does not support sticky layout, we need the wheel stickyfill

npm install stickyfill 
yarn add stickyfill

---vue---
The header div tag needs to be given a dynamic id to indicate uniqueness

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

Single file import

Import it into the page you need:
<script src="path/to/stickyfill.min.js"></script>
var Stickyfill = require("stickyfill");
var stickyfill = Stickyfill();

js file:

For specific methods, see 3 above
let elements = document.getElementById(`sticky${idx}`);
stickyfill.add(elements);

The above can be perfectly realized~~~
PS: If you only need to be compatible with Google, then you don't need to go through so much trouble. You can directly use the stiky layout without the need for wheels--
You can refer to https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/Xu Xin's article

Final effect picture:

This is the end of this article about how to use CSS sticky layout to position the header at the top. For more relevant CSS sticky content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!