So positionieren Sie die Kopfzeile mithilfe des CSS-Sticky-Layouts oben

Anwendungsszenarien:

Eine der neuen Anforderungen besteht darin, eine Fragebogenumfrage durchzuführen, die zwangsläufig viele Fragen umfasst und bei der mehrere Personen eine Frage beantworten müssen. Dieses Phänomen tritt auf, wenn Sie auf dem Mobiltelefon wischen, und Sie vergessen die Frage, wenn Sie nach oben wischen. Daher muss der Titel nach der Berechnung einer bestimmten Entfernung positioniert werden. Fixieren Sie den Titel, der in den Bereich gleitet, immer oben, um die Wertung zu erleichtern.

Lösung:

1. Als erstes fällt einem das fixe Layout auf, das heißt, der Titel wird ab einer bestimmten Entfernung oben auf dem Bildschirm fixiert. (Das ist möglich, aber der Vorgang läuft nicht ganz reibungslos ab.)
2. Klebriges Layout

Sticky kann diese Anforderung sehr gut erfüllen, allerdings muss die Kompatibilität (kompatibel mit IE) berücksichtigt werden.

Einprägsame Umsetzungsideen:

1. Zuerst müssen Sie die Position des Schiebereglers aufzeichnen und auf Scroll-Ereignisse achten:

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

Denken Sie daran, dieses Ereignis zu entfernen, bevor die Komponente zerstört wird beforeDestroyed() {
    window.removeEventListener("scrollen", this.handleScroll);
  }

2. Berechnen Sie die Höhe des Titels jeder Frage vom oberen Bildschirmrand aus und bilden Sie ein Array.

// Denken Sie daran, für jede Frage einen Verweis festzulegen. Mein Verweis ist die ID jeder Frage.

-- Vue-Abkürzung ---
<div
  :ref="Frage.id"
  v-for="(Frage, Index) von formData.questions"
  :Schlüssel="Index"
>


// Um ​​das Unordnungsproblem zu vermeiden, habe ich auch eine Sortierung durchgeführt ---- js -----
 dies.topPositionArr = [];
  für (let-Schlüssel in this.$refs) {
      für (lass idx in diesem.$refs[key]) {
        dies.topPositionArr.push(dies.$refs[key][idx].offsetTop);
      }
    }
    this.topPositionArr = [...neues Set(this.topPositionArr)];
    diese.topPositionArrtopPositionArr = diese.topPositionArr.sort(
      (a, b) => {
        gib a - b zurück;
      }
    );        

3. Vergleichen Sie die vom Objektträger überwachte Distanz mit dem erhaltenen Titel und wählen Sie den gefundenen Titel aus.

// Kompatibel mit verschiedenen Browsern. Verschiedene Browser haben unterschiedliche Möglichkeiten, offsetTop zu erhalten. handleScroll() {
    this.scrollTop = Dokument.documentElement.scrollTop
  ? Dokument.documentElement.scrollTop
  : Dokument.Body.ScrollTop;
  
lass scrollTop = dieses.scrollTop;
// Der ScrollTop der ersten Frage bleibt unverändert und der ScrollTop der zweiten Frage ändert sich this.topPositionArr.forEach((item, idx) => {
  wenn (idx > 1) {
    dies.scrollTop = scrollTop + 220;
  }
  //Warum das tun? Da der IE kein Sticky Layout unterstützt, benötigen wir ein Plug-in, das hilft, if (this.scrollTop > item) {
    let-Elemente = document.getElementById(`sticky${idx}`);
    stickyfill.add(Elemente);
  }
});
}

4. IE-Kompatibilitätsprobleme

Da der IE kein Sticky-Layout unterstützt, benötigen wir das Rad Stickyfill

npm installiere stickyfill 
Garn hinzufügen Stickyfill

---Ansicht---
Dem Header-Div-Tag muss eine dynamische ID zugewiesen werden, um Eindeutigkeit zu gewährleisten

<div
  :id="`sticky${question.index}`"
  Klasse="istSticky"
>

Einzeldateiimport

Importieren Sie es in die gewünschte Seite:
<script src="Pfad/zu/stickyfill.min.js"></script>
var Stickyfill = erforderlich("stickyfill");
var stickyfill = Stickyfill();

js-Datei:

Für spezifische Methoden siehe 3 oben
let-Elemente = document.getElementById(`sticky${idx}`);
stickyfill.add(Elemente);

Das oben genannte kann perfekt realisiert werden~~~
PS: Wenn Sie nur mit Google kompatibel sein müssen, müssen Sie sich nicht so viel Mühe machen. Sie können das Stiky-Layout direkt verwenden, ohne dass Sie Räder benötigen.
Sie können sich auf den Artikel von Xu Xin beziehen: https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/

Bild des endgültigen Effekts:

Dies ist das Ende dieses Artikels über die Verwendung von CSS-Sticky-Layout zum Positionieren der Kopfzeile oben. Weitere relevante CSS-Sticky-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!