運(yùn)用場景：
新需求有個(gè)項(xiàng)目是要做問卷調(diào)查，其中必然會(huì)涉及到很多題目，以及一個(gè)題目下需要對多個(gè)人打分，手機(jī)端滑動(dòng)的時(shí)候，就會(huì)發(fā)生這種現(xiàn)象，劃上去會(huì)忘記了題目。 所以計(jì)算一定的距離之后需要對題頭進(jìn)行一個(gè)定位。使滑到相對于區(qū)域的題頭一直固定在頂部，方便打分。
解決思路：
1.首先想到的是fixed布局就是題頭到一定距離的時(shí)候就固定在屏幕的頂部。 （可以實(shí)現(xiàn)，但是過程不是很絲滑）
2.sticky布局
sticky就可以很好的實(shí)現(xiàn)這個(gè)需求，但是需要考慮到兼容性（兼容IE）
sticky實(shí)現(xiàn)思路：
1.首先需要記錄滑塊的位置，需要監(jiān)聽滾動(dòng)事件：
window.addEventListener("scroll", this.handleScroll);
記得組件銷毀前去移出這個(gè)事件
beforeDestroyed() {
window.removeEventListener("scroll", this.handleScroll);
}
2.計(jì)算出每道題目的題頭距離屏幕頂部的高度，并組成一個(gè)數(shù)組。
// 記得給每一條題目都設(shè)置ref，我的ref就是每道題的id
-- vue簡略縮寫---
<div
:ref="question.id"
v-for="(question, index) of formData.questions"
:key="index"
>
// 為防止亂序問題，我還進(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)聽到的距離和獲取到的題頭進(jìn)行一個(gè)比較，選擇定位的題頭。
// 兼容不同的游覽器 不同游覽器的offsetTop的取法是不一樣的
handleScroll() {
this.scrollTop = document.documentElement.scrollTop
? document.documentElement.scrollTop
: document.body.scrollTop;
let scrollTop = this.scrollTop;
// 第一題的scrollTop不變，從第二題的scrollTop開始變
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的兼容問題
因?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"
>
單文件引入
在你需要的頁面中引入：
<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/旭鑫大大的文章
最后效果圖：
到此這篇關(guān)于css之粘性sticky布局實(shí)現(xiàn)題頭定位在頂部的方法的文章就介紹到這了,更多相關(guān)css 粘性sticky內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
