VUE implementiert Saugknopf an der Unterseite

<Vorlage>
 <div id="test">
 <ul Klasse="Listenfeld">
 <li v-for="(Artikel, Schlüssel) in 50" :Schlüssel="Schlüssel">
 {{ Artikel }}
 </li>
 </ul>
 <Übergangsname="Überblenden">
 <p :class="['go', { isFixed: headerFixed }]" v-if="headerFixed">
 Saugknopf unten</p>
 </Übergang>
 </div>
</Vorlage>
 
<Skript>
Standard exportieren {
 Name: "Test",
 Daten() {
 zurückkehren {
 headerFixed: false,
 }
 },
 montiert() {
 window.addEventListener('scrollen', this.handleScroll)
 },
 zerstört() {
 window.removeEventListener('scrollen', this.handleScroll)
 },
 Methoden: {
 handleScroll() {
 const scrollTop =
 Fenster.pageYOffset || Dokument.documentElement.scrollTop || Dokument.body.scrollTop
 this.headerFixed = scrollTop > 50
 },
 },
}
</Skript>
 
<style lang="scss" scoped="scoped">
#prüfen {
 .Listenfeld {
 Polsterung unten: 50px;
 }
 .gehen {
 Hintergrund: rosa;
 Textausrichtung: zentriert;
 Zeilenhöhe: 50px;
 Breite: 100 %;
 }
 .istFixed {
 Position: fest;
 unten: 0;
 }
 .fade-enter {
 Deckkraft: 0;
 }
 .fade-enter-active {
 Übergang: Deckkraft 0,8 s;
 }
 .fade-verlassen-zu {
 Deckkraft: 0;
 }
 .fade-leave-active {
 Übergang: Deckkraft 0,8 s;
 }
}
</Stil>