css之粘性sticky布局實(shí)現(xiàn)題頭定位在頂部的方法

發(fā)布時(shí)間：2021-02-04 15:50:09 作者：phoebemoon

這篇文章主要介紹了css之粘性sticky布局實(shí)現(xiàn)題頭定位在頂部的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

運(yùn)用場(chǎng)景：

新需求有個(gè)項(xiàng)目是要做問(wèn)卷調(diào)查，其中必然會(huì)涉及到很多題目，以及一個(gè)題目下需要對(duì)多個(gè)人打分，手機(jī)端滑動(dòng)的時(shí)候，就會(huì)發(fā)生這種現(xiàn)象，劃上去會(huì)忘記了題目。所以計(jì)算一定的距離之后需要對(duì)題頭進(jìn)行一個(gè)定位。使滑到相對(duì)于區(qū)域的題頭一直固定在頂部，方便打分。

解決思路：

1.首先想到的是fixed布局就是題頭到一定距離的時(shí)候就固定在屏幕的頂部。（可以實(shí)現(xiàn)，但是過(guò)程不是很絲滑）
2.sticky布局

sticky就可以很好的實(shí)現(xiàn)這個(gè)需求，但是需要考慮到兼容性（兼容IE）

sticky實(shí)現(xiàn)思路：

1.首先需要記錄滑塊的位置，需要監(jiān)聽(tīng)滾動(dòng)事件：

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

記得組件銷(xiāo)毀前去移出這個(gè)事件
 beforeDestroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }

2.計(jì)算出每道題目的題頭距離屏幕頂部的高度，并組成一個(gè)數(shù)組。

// 記得給每一條題目都設(shè)置ref，我的ref就是每道題的id

-- vue簡(jiǎn)略縮寫(xiě)---
<div
  :ref="question.id"
  v-for="(question, index) of formData.questions"
  :key="index"
>


// 為防止亂序問(wèn)題，我還進(jìn)行了一個(gè)排序
---- 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.滑動(dòng)監(jiān)聽(tīng)到的距離和獲取到的題頭進(jìn)行一個(gè)比較，選擇定位的題頭。

// 兼容不同的游覽器 不同游覽器的offsetTop的取法是不一樣的

handleScroll() {
    this.scrollTop = document.documentElement.scrollTop
  ? document.documentElement.scrollTop
  : document.body.scrollTop;
  
let scrollTop = this.scrollTop;
// 第一題的scrollTop不變，從第二題的scrollTop開(kāi)始變
this.topPositionArr.forEach((item, idx) => {
  if (idx > 1) {
    this.scrollTop = scrollTop + 220;
  }
  //為什么這樣做呢？ 是因?yàn)閕E不支持sticky布局，我們需要一個(gè)插件去協(xié)助使用
  if (this.scrollTop > item) {
    let elements = document.getElementById(`sticky${idx}`);
    stickyfill.add(elements);
  }
});
}

4.IE的兼容問(wèn)題

因?yàn)镮E是不支持sticky布局的，所以我們需要輪子 stickyfill

npm install stickyfill 
yarn add stickyfill

--- vue---
需要給題頭的div標(biāo)簽一個(gè)動(dòng)態(tài)的id，表示唯一性

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

單文件引入

在你需要的頁(yè)面中引入：
<script src="path/to/stickyfill.min.js"></script>
var Stickyfill = require("stickyfill");
var stickyfill = Stickyfill();

js文件：

具體方法看上述3
let elements = document.getElementById(`sticky${idx}`);
stickyfill.add(elements);

以上就可以完美的實(shí)現(xiàn)哦~~~
PS：如果是只需要兼容谷歌，那就不需要這么麻煩，可以直接使用stiky布局，不再需要輪子 --
可以參考看看https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/旭鑫大大的文章