|
|
@@ -1,91 +0,0 @@
|
|
|
-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
|
|
|
-
|