欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間：2021-02-04 15:50:09   作者：phoebemoon   我要評論
這篇文章主要介紹了css之粘性sticky布局實現(xiàn)題頭定位在頂部的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

運用場景：

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

解決思路：

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

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

sticky實現(xiàn)思路：

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

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

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

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

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

-- vue簡略縮寫---
<div
  :ref="question.id"
  v-for="(question, index) of formData.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;
      }
    );

3.滑動監(jiān)聽到的距離和獲取到的題頭進行一個比較，選擇定位的題頭。

// 兼容不同的游覽器 不同游覽器的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;
  }
  //為什么這樣做呢？ 是因為iE不支持sticky布局，我們需要一個插件去協(xié)助使用
  if (this.scrollTop > item) {
    let elements = document.getElementById(`sticky${idx}`);
    stickyfill.add(elements);
  }
});
}

4.IE的兼容問題

因為IE是不支持sticky布局的，所以我們需要輪子 stickyfill

npm install stickyfill 
yarn add stickyfill

--- vue---
需要給題頭的div標簽一個動態(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);

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

最后效果圖：

到此這篇關于css之粘性sticky布局實現(xiàn)題頭定位在頂部的方法的文章就介紹到這了,更多相關css 粘性sticky內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

  • 詳解css粘性定位position：sticky問題采坑

    這篇文章主要介紹了詳解css粘性定位position：sticky問題采坑的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下
    2019-08-26

  • 詳解CSS粘性定位 sticky

    這篇文章主要介紹了CSS粘性定位 sticky 的相關知識，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-04-29

  • CSS使用position:sticky 實現(xiàn)粘性布局的方法

    這篇文章主要介紹了CSS使用position:sticky 實現(xiàn)粘性布局的方法的相關資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-31

最新評論