92 lines
2.4 KiB
JavaScript
92 lines
2.4 KiB
JavaScript
|
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
|
|||
|
|
|