init

src/component/affix/index.less

@@ -0,0 +1,5 @@
+.layui-affix{
+  display: block;
+  z-index: 999;
+  transition: all 0.3s ease-in-out;
+}

src/component/affix/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

src/component/affix/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="layui-affix" :style="getStyle" ref="dom">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "LayAffix",
+};
+</script>
+<script setup lang="ts">
+import "./index.less";
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  computed,
+  StyleValue,
+} from "vue";
+
+export interface AiffxProps {
+  offset?: number;
+  target?: HTMLElement;
+  position?: string;
+}
+
+const props = withDefaults(defineProps<AiffxProps>(), {
+  offset: 0,
+  position: "top",
+  target: () => {
+    return document.body;
+  },
+});
+
+const emit = defineEmits(["scroll"]);
+const outWindow = ref(false);
+const dom = ref();
+
+let changeScrollTop = 0;
+let orginOffsetLeft = 0;
+let orginOffsetTop = 0;
+let marginLeft = 0;
+let marginTop = 0;
+let marginBottom = 0;
+let fixedOffset = 0;
+
+const getStyle = computed(() => {
+  if (outWindow.value && dom.value) {
+    let style = {
+      position: "fixed !important",
+      top: "unset",
+      bottom: "unset",
+      left: orginOffsetLeft - marginLeft + "px",
+    };
+    if (props.position === "top") {
+      style.top = fixedOffset - marginTop + "px";
+    } else {
+      style.bottom = fixedOffset - marginBottom + "px";
+    }
+    return style as StyleValue;
+  }
+});
+//检查是否在窗口内
+const checkInWindow = () => {
+  if (dom.value) {
+    let offsetTop = dom.value.offsetTop;
+    let scrollTop = props.target?.scrollTop;
+    if (props.position === "top") {
+      //top检查 当前元素与容器顶部距离-减去滚动条的高度+容器offsetTop
+      let result = offsetTop - scrollTop + props.target.offsetTop;
+      if (result < fixedOffset) {
+        if (outWindow.value) {
+          if (scrollTop <= changeScrollTop) {
+            outWindow.value = false;
+          }
+        } else {
+          changeScrollTop = scrollTop;
+          outWindow.value = true;
+        }
+      }
+    } else {
+      //bottom检查 可视区窗口高度 + 文档滚动高度 - 当前元素与容器顶部距离 - 当前元素高度
+      let viewHeight =
+        props.target.offsetHeight > window.innerHeight
+          ? window.innerHeight
+          : props.target.offsetHeight;
+      let result = viewHeight + scrollTop - offsetTop - dom.value.offsetHeight;
+      if (outWindow.value) {
+        if (scrollTop >= changeScrollTop) {
+          outWindow.value = false;
+        }
+      } else {
+        if (result < fixedOffset) {
+          changeScrollTop = scrollTop - result + props.offset;
+          outWindow.value = true;
+        }
+      }
+    }
+    emit("scroll", {
+      targetScroll: scrollTop,
+      affixed: outWindow.value,
+      offset: !outWindow.value ? 0 : Math.abs(scrollTop - changeScrollTop),
+    });
+  }
+};
+
+const getDomStyle = (dom: any, attr: string) => {
+  if (dom.currentStyle) {
+    return dom.currentStyle[attr];
+  } else {
+    // @ts-ignore
+    return document.defaultView.getComputedStyle(dom, null)[attr];
+  }
+};
+
+onMounted(() => {
+  nextTick(() => {
+    orginOffsetTop = dom.value.offsetTop - props.target.offsetTop;
+    orginOffsetLeft = dom.value.getBoundingClientRect().left;
+    marginLeft = parseFloat(getDomStyle(dom.value, "marginLeft"));
+    marginTop = parseFloat(getDomStyle(dom.value, "marginTop"));
+    marginBottom = parseFloat(getDomStyle(dom.value, "marginBottom"));
+    fixedOffset = props.offset + props.target.offsetTop;
+    if (props.position === "bottom") {
+      fixedOffset = props.offset;
+    }
+    props.target.addEventListener("scroll", checkInWindow, true);
+    checkInWindow();
+  });
+});
+
+onUnmounted(() => {
+  props.target.removeEventListener("scroll", checkInWindow);
+});
+</script>