333

schangxiang@126.com

2025-09-19 18966e02fb573c7e2bb0c6426ed792b38b910940

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
const vueSticky = {};
let listenAction;
vueSticky.install = Vue => {
  Vue.directive("sticky", {
    inserted(el, binding) {
      const params = binding.value || {};
      const stickyTop = params.stickyTop || 0;
      const zIndex = params.zIndex || 1000;
      const elStyle = el.style;
 
      elStyle.position = "-webkit-sticky";
      elStyle.position = "sticky";
      //  if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
      //  if (~elStyle.position.indexOf('sticky')) {
      //      elStyle.top = `${stickyTop}px`;
      //      elStyle.zIndex = zIndex;
      //      return
      //  }
      const elHeight = el.getBoundingClientRect().height;
      const elWidth = el.getBoundingClientRect().width;
      elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`;
 
      const parentElm = el.parentNode || document.documentElement;
      const placeholder = document.createElement("div");
      placeholder.style.display = "none";
      placeholder.style.width = `${elWidth}px`;
      placeholder.style.height = `${elHeight}px`;
      parentElm.insertBefore(placeholder, el);
 
      let active = false;
 
      const getScroll = (target, top) => {
        const prop = top ? "pageYOffset" : "pageXOffset";
        const method = top ? "scrollTop" : "scrollLeft";
        let ret = target[prop];
        if (typeof ret !== "number") {
          ret = window.document.documentElement[method];
        }
        return ret;
      };
 
      const sticky = () => {
        if (active) {
          return;
        }
        if (!elStyle.height) {
          elStyle.height = `${el.offsetHeight}px`;
        }
 
        elStyle.position = "fixed";
        elStyle.width = `${elWidth}px`;
        placeholder.style.display = "inline-block";
        active = true;
      };
 
      const reset = () => {
        if (!active) {
          return;
        }
 
        elStyle.position = "";
        placeholder.style.display = "none";
        active = false;
      };
 
      const check = () => {
        const scrollTop = getScroll(window, true);
        const offsetTop = el.getBoundingClientRect().top;
        if (offsetTop < stickyTop) {
          sticky();
        } else {
          if (scrollTop < elHeight + stickyTop) {
            reset();
          }
        }
      };
      listenAction = () => {
        check();
      };
 
      window.addEventListener("scroll", listenAction);
    },
 
    unbind() {
      window.removeEventListener("scroll", listenAction);
    }
  });
};
 
export default vueSticky;