吉鹏 / gulu-admin

Blame view

src/directive/sticky.js 2.44 KB
edit raw normal view history
d7d9c38c2   Adam   auto commit the c... 
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