Element PlusはAffixを実装します

<テンプレート>
  <div ref="root" class="el-affix" :style="rootStyle">
    <div :class="{'el-affix--fixed': state.fixed}" :style="affixStyle">
      <スロット></スロット>
    </div>
  </div>
</テンプレート>

// いくつかのコアコード、コードの順序は調整されています setup(props, { emitting }) {
    // ターゲットコンテナ参照
    定数ターゲット = ref(null) 
    // ref を修正し、テンプレートの ref 属性と連携して HTML 要素を取得します。const root = ref(null)
    // スクロールコンテナ参照
    定数スクロールコンテナ = ref(null)
    
    // 固定状態 const state = reactive({
      修正: false、
      height: 0, // ルートの高さ
      width: 0, // ルートの幅
      scrollTop: 0, // documentElement のスクロールトップ
      clientHeight: 0, // documentElement の clientHeight
      変換: 0,
    })
    
    マウント時(() => {
      // 受信ターゲットに基づいてターゲットコンテナを決定する if (props.target) {
        ターゲット値 = document.querySelector(props.target)
        if (!target.value) {
          新しいエラーをスローします(`ターゲットが存在しません: ${props.target}`)
        }
      } それ以外 {
        ターゲット値 = document.documentElement
      }
      
      // 固定要素に応じて、上方向のスクロールコンテナを検索します scrollContainer.value = getScrollContainer(root.value)
      // スクロールコンテナのスクロールイベントをリッスンします on(scrollContainer.value, 'scroll', onScroll)
      // 固定要素のサイズ変更イベントをリッスンします。addResizeListener(root.value, updateState)
    })
    
    // スクロールコンテナのスクロールイベントの応答関数 const onScroll = () => {
      // 固定状態を更新する updateState()
      
      出力('スクロール', {
        スクロールトップ: state.scrollTop、
        固定: state.fixed、
      })
    }
    
    // 固定状態を更新する function const updateState = () => {
      定数 rootRect = root.value.getBoundingClientRect()
      定数 targetRect = target.value.getBoundingClientRect()
      状態.height = ルート矩形.height
      状態.幅 = ルート矩形.幅
      state.scrollTop = scrollContainer.value === window ? document.documentElement.scrollTop : scrollContainer.value.scrollTop
      state.clientHeight = document.documentElement.clientHeight

      props.position === 'top'の場合{
        もしprops.targetが
          定数の差 = targetRect.bottom - props.offset - state.height
          // targetRect.bottom > 0 は、固定ピンが常にコンテナー内に保持され、範囲を超えると非表示になることを意味します state.fixed = props.offset > rootRect.top && targetRect.bottom > 0
          // 次のシナリオを処理するために使用されます: スクロール処理中に、ターゲット コンテナーの表示領域がピン全体を表示するのに十分でない場合は、ピンをオフセットしてその一部のみを表示する必要があります。 state.transform = Difference < 0 ? Difference: 0
        } それ以外 {
          state.fixed = props.offset > rootRect.top
        }
      } それ以外 {
        もしprops.targetが
          定数の差 = state.clientHeight - targetRect.top - props.offset - state.height
          state.fixed = state.clientHeight - props.offset < rootRect.bottom && state.clientHeight > targetRect.top
          state.transform = 差 < 0 ? -差: 0
        } それ以外 {
          state.fixed = state.clientHeight - props.offset < rootRect.bottom
        }
      }
    }
    // 固定状態の変化を監視し、変更イベントを発行します watch(() => state.fixed, () => {
      出力('change'、状態.fixed)
    })
    
    // プロパティを計算し、ネイルの状態に応じてネイルのスタイルを自動的に更新します。const affixStyle = computed(() => {
      状態が固定されている場合
        戻る
      }
      定数オフセット = props.offset ? `${props.offset}px` : 0
      const transform = state.transform ? `translateY(${state.transform}px)` : ''

      戻る {
        高さ: `${state.height}px`,
        幅: `${state.width}px`,
        上部: props.position === 'top' ? オフセット: ''、
        下部: props.position === 'bottom' ? オフセット: ''、
        変換: 変換、
        zIndex: props.zIndex、
      }
    })
}