CSS スティッキーレイアウトを使用してヘッダーを上部に配置する方法

適用シナリオ:

新しい要件の 1 つはアンケート調査を行うことですが、必然的に多くの質問が含まれ、1 つの質問で複数の人が採点する必要があります。この現象は携帯電話でスライドするときに発生し、上にスワイプすると質問を忘れてしまいます。そのため、一定の距離を計算した上でタイトルを配置する必要があります。スコアリングを容易にするために、エリアにスライドするタイトルを常に上部に固定します。

解決：

1. 最初に思い浮かぶのは固定レイアウトです。これは、タイトルが一定の距離に達すると画面の上部に固定されることを意味します。（可能ですが、プロセスがあまりスムーズではありません）
2. スティッキーレイアウト

Sticky はこの要件を非常によく満たしますが、互換性 (IE との互換性) を考慮する必要があります。

スティッキー実装のアイデア:

1. まず、スライダーの位置を記録し、スクロールイベントをリッスンする必要があります。

window.addEventListener("スクロール", this.handleScroll);

コンポーネントが破棄される前にこのイベントを削除することを忘れないでください beforeDestroyed() {
    window.removeEventListener("スクロール"、this.handleScroll);
  }

2. 画面上部から各質問のタイトルの高さを計算し、配列を作成します。

// 各質問に必ず参照を設定してください。私の参照は各質問の ID です。

-- Vue の略語 ---
<div
  :ref="質問ID"
  v-for="formData.questions の (質問、インデックス)"
  :key="インデックス"
>


// 乱雑さの問題を防ぐために、ソートも実行しました ---- 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 = [...新しいSet(this.topPositionArr)];
    this.topPositionArrtopPositionArr = this.topPositionArr.sort(
      (a, b) => {
        a - b を返します。
      }
    );

3. スライドで監視した距離と取得したタイトルを比較し、見つかったタイトルを選択します。

// さまざまなブラウザと互換性があります。ブラウザによって offsetTop を取得する方法が異なります。handleScroll() {
    this.scrollTop = document.documentElement.scrollTop
  ? ドキュメント.documentElement.scrollTop
  : ドキュメント本体のスクロールトップ;
  
scrollTop を this.scrollTop とします。
// 最初の質問の scrollTop は変更されず、2 番目の質問の scrollTop が変更されます this.topPositionArr.forEach((item, idx) => {
  （idx > 1）の場合{
    this.scrollTop = scrollTop + 220;
  }
  //なぜこれを行うのですか? IEは固定レイアウトをサポートしていないため、補助するプラグインが必要です。if (this.scrollTop > item) {
    elements = document.getElementById(`sticky${idx}`);
    スティッキーフィルに要素を追加します。
  }
});
}

4. IEの互換性の問題

IEはスティッキーレイアウトをサポートしていないため、ホイールのスティッキーフィルが必要です。

npm インストール スティッキーフィル 
糸 スティッキーフィルを追加

---ビュー---
ヘッダーdivタグには、一意性を示すために動的なIDを与える必要がある

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

単一ファイルのインポート

必要なページにインポートします。
<script src="stickyfill.min.js へのパス"></script>
var Stickyfill = require("stickyfill");
var スティッキーフィル = スティッキーフィル();

js ファイル:

具体的な方法については上記3を参照
elements = document.getElementById(`sticky${idx}`);
スティッキーフィルに要素を追加します。

上記は完璧に実現できます~~~
PS: Google との互換性だけが必要なら、それほど苦労する必要はありません。ホイールを必要とせずに、スティッキーレイアウトを直接使用できます。
https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/Xu Xinの記事を参照してください。

最終効果画像:

CSS スティッキーレイアウトを使用してヘッダーを上部に配置する方法についての記事はこれで終わりです。より関連性の高い CSS スティッキーコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Docker ケース分析: Redis サービスの構築

>>: React の調整アルゴリズム Diffing アルゴリズム戦略の詳細な説明