Application scenario:

There is a project to do a questionnaire survey, which will inevitably involve many questions and need to score multiple people under one question. This phenomenon will occur when the mobile phone is swiped, and the question will be forgotten when you swipe it. Therefore, after calculating a certain distance, it is necessary to conduct a positioning of the topic. So that slide to relative to the area of the topic has been fixed at the top, easy to score.

Solution:

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

2. Sticky layout can achieve this requirement well, but need to consider compatibility (compatible with IE)

Sticky implementation ideas:

1. The position of the slider needs to be recorded first, and the scroll event needs to be monitored:
window.addEventListener("scroll", this.handleScroll); Remember component destruction to remove this event beforeDestroyed () {window. The removeEventListener (" scroll ", enclosing handleScroll); }Copy the code
2. Calculate the height of each question head from the top of the screen and form an array.
// Remember to set ref for each item, <div :ref="question. Id "v-for="(ref="question. Id" v-for=" Questions ":key="index" > ---- 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; });Copy the code
3. Compare the monitored distance with the obtained header and select the positioned header.
/ / compatible with different browser different browser offsetTop method is not the same as handleScroll () {this. ScrollTop = document. DocumentElement. ScrollTop? document.documentElement.scrollTop : document.body.scrollTop; let scrollTop = this.scrollTop; // scrollTop is unchanged, From the scrollTop of the second question this. TopPositionArr. ForEach ((item, independence idx) = > {the if (independence idx > 1) {enclosing scrollTop = scrollTop + 220; } // Why do I do this? If (this.scrollTop > item) {let elements = document.getelementById (' sticky${idx} '); let elements = document.getelementById (' sticky${idx} '); stickyfill.add(elements); }}); }Copy the code
4. Compatibility problems of IE

Since IE doesn’t support sticky layouts, we need the wheel stickyfill

npm install stickyfill 
yarn add stickyfill
Copy the code

— vue—

The div tag in the header needs a dynamic ID to indicate uniqueness

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

Single file import

In the page you need to introduce: < script SRC = "path/to/stickyfill. Min. Js" > < / script > var stickyfill = the require (" stickyfill "); var stickyfill = Stickyfill();Copy the code

Js file:

Let elements = document.getElementById(' sticky${idx} '); stickyfill.add(elements);Copy the code

The above can be perfect to achieve oh ~~~

PS: If you only need to be compatible with Google, you don’t need to bother, you can just use stiky layout, no wheels

Can refer to see www.zhangxinxu.com/wordpress/2… Xu Xin great article

Final effect: