Element Plus implementiert Affix

<Vorlage>
  <div ref="root" Klasse="el-affix" :style="rootStyle">
    <div :class="{'el-affix--fixed': state.fixed}" :style="affixStyle">
      <Steckplatz></Steckplatz>
    </div>
  </div>
</Vorlage>

// Bei einigen Kerncodes wird die Codereihenfolge angepasst setup(props, { emit }) {
    // Zielcontainer-Referenz
    const Ziel = ref(null) 
    // Ref reparieren und mit dem Ref-Attribut in der Vorlage zusammenarbeiten, um das HTML-Element const root = ref(null) zu erhalten.
    // Scroll-Container-Referenz
    const scrollContainer = ref(null)
    
    // Fester Zustand const state = reactive({
      behoben: falsch,
      Höhe: 0, // Höhe der Wurzel
      width: 0, // Breite der Wurzel
      scrollTop: 0, // ScrollTop des Dokumentelements
      clientHeight: 0, // Clienthöhe des Dokumentelements
      transformieren: 0,
    })
    
    beimMounted(() => {
      // Bestimmen Sie den Zielcontainer basierend auf dem eingehenden Ziel, wenn (props.target) {
        Zielwert = Dokument.Abfrageselektor(Eigenschaften.Ziel)
        wenn (!ziel.wert) {
          neuen Fehler werfen („Ziel existiert nicht: ${props.target}“)
        }
      } anders {
        Zielwert = Dokument.Dokumentelement
      }
      
      // Finde den Scroll-Container nach oben, basierend auf dem festen Element scrollContainer.value = getScrollContainer(root.value)
      // Auf das Scroll-Ereignis des Scroll-Containers warten on(scrollContainer.value, 'scroll', onScroll)
      // Auf das Größenänderungsereignis des festen Elements warten addResizeListener(root.value, updateState)
    })
    
    // Die Antwortfunktion des Scroll-Ereignisses des Scroll-Containers const onScroll = () => {
      // Den festen Status aktualisieren updateState()
      
      emittieren('scrollen', {
        scrollTop: Zustand.scrollTop,
        behoben: status.behoben,
      })
    }
    
    // Aktualisieren Sie die feste Statusfunktion const updateState = () => {
      const rootRect = root.value.getBoundingClientRect()
      const targetRect = target.value.getBoundingClientRect()
      Zustandshöhe = Wurzelrechteckhöhe
      Zustand.Breite = rootRect.Breite
      state.scrollTop = scrollContainer.value === Fenster ? document.documentElement.scrollTop : scrollContainer.value.scrollTop
      Zustand.Clienthöhe = Dokument.Dokumentelement.Clienthöhe

      wenn (Eigenschaften.Position === 'oben') {
        wenn (Eigenschaften.Ziel) {
          Konstante Differenz = Zielrechteck.unten - Eigenschaften.Offset - Zustand.Höhe
          // targetRect.bottom > 0 bedeutet, dass der feste Pin immer im Container bleibt und ausgeblendet wird, wenn er den Bereich überschreitet state.fixed = props.offset > rootRect.top && targetRect.bottom > 0
          // Wird verwendet, um das Szenario zu handhaben: Wenn während des Scrollvorgangs der sichtbare Bereich des Zielcontainers nicht ausreicht, um den gesamten Pin anzuzeigen, sollte der Pin entsprechend versetzt werden, um nur einen Teil davon anzuzeigen. state.transform = difference < 0 ? difference : 0
        } anders {
          Zustand.fest = Eigenschaften.Offset > rootRect.top
        }
      } anders {
        wenn (Eigenschaften.Ziel) {
          Konstante Differenz = Zustand.Clienthöhe - Zielrechteck.oben - Eigenschaften.Offset - Zustand.Höhe
          state.fixed = state.clientHeight - props.offset < rootRect.bottom und state.clientHeight > targetRect.top
          Zustand.Transformation = Differenz < 0? -Differenz: 0
        } anders {
          Zustand.fixiert = Zustand.Clienthöhe - Eigenschaften.Offset < rootRect.bottom
        }
      }
    }
    // Überwachen Sie die feste Statusänderung und geben Sie Änderungsereignisse aus watch(() => state.fixed, () => {
      emittieren('ändern', Status.behoben)
    })
    
    // Berechnen Sie die Eigenschaft und aktualisieren Sie den Stil des Nagels automatisch entsprechend dem Zustand des Nagels const affixStyle = computed(() => {
      wenn (!state.fixiert) {
        zurückkehren
      }
      const offset = props.offset ? `${props.offset}px` : 0
      const transform = state.transform ? `translateY(${state.transform}px)` : ''

      zurückkehren {
        Höhe: `${state.height}px`,
        Breite: `${state.width}px`,
        oben: props.position === 'oben'? Offset: '',
        unten: props.position === 'unten'? Offset: '',
        transformieren: transformieren,
        zIndex: props.zIndex,
      }
    })
}