2017-04-18 07:09:13 +00:00
|
|
|
<template>
|
2017-07-06 09:56:17 +00:00
|
|
|
<div :style="{height:height+'px',zIndex:zIndex}">
|
2019-03-19 02:31:12 +00:00
|
|
|
<div
|
|
|
|
:class="className"
|
|
|
|
:style="{top:(isSticky ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,height:height+'px'}"
|
|
|
|
>
|
2017-07-06 09:56:17 +00:00
|
|
|
<slot>
|
|
|
|
<div>sticky</div>
|
|
|
|
</slot>
|
2017-04-18 07:09:13 +00:00
|
|
|
</div>
|
2017-07-06 09:56:17 +00:00
|
|
|
</div>
|
2017-04-18 07:09:13 +00:00
|
|
|
</template>
|
2017-07-06 09:56:17 +00:00
|
|
|
|
2017-04-18 07:09:13 +00:00
|
|
|
<script>
|
2017-08-22 07:43:34 +00:00
|
|
|
export default {
|
|
|
|
name: 'Sticky',
|
|
|
|
props: {
|
|
|
|
stickyTop: {
|
|
|
|
type: Number,
|
|
|
|
default: 0
|
2017-07-06 09:56:17 +00:00
|
|
|
},
|
2017-08-22 07:43:34 +00:00
|
|
|
zIndex: {
|
|
|
|
type: Number,
|
|
|
|
default: 1
|
2017-07-06 09:56:17 +00:00
|
|
|
},
|
2017-08-22 07:43:34 +00:00
|
|
|
className: {
|
2018-08-19 08:55:24 +00:00
|
|
|
type: String,
|
|
|
|
default: ''
|
2017-08-22 07:43:34 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
active: false,
|
|
|
|
position: '',
|
|
|
|
width: undefined,
|
2018-05-31 05:22:12 +00:00
|
|
|
height: undefined,
|
|
|
|
isSticky: false
|
2017-08-22 07:43:34 +00:00
|
|
|
}
|
|
|
|
},
|
2017-11-29 07:57:47 +00:00
|
|
|
mounted() {
|
|
|
|
this.height = this.$el.getBoundingClientRect().height
|
|
|
|
window.addEventListener('scroll', this.handleScroll)
|
2018-05-31 02:49:11 +00:00
|
|
|
window.addEventListener('resize', this.handleReize)
|
2017-11-29 07:57:47 +00:00
|
|
|
},
|
|
|
|
activated() {
|
|
|
|
this.handleScroll()
|
|
|
|
},
|
|
|
|
destroyed() {
|
|
|
|
window.removeEventListener('scroll', this.handleScroll)
|
2018-05-31 02:49:11 +00:00
|
|
|
window.removeEventListener('resize', this.handleReize)
|
2017-11-29 07:57:47 +00:00
|
|
|
},
|
2017-08-22 07:43:34 +00:00
|
|
|
methods: {
|
|
|
|
sticky() {
|
|
|
|
if (this.active) {
|
|
|
|
return
|
2017-04-18 07:09:13 +00:00
|
|
|
}
|
2017-08-22 07:43:34 +00:00
|
|
|
this.position = 'fixed'
|
|
|
|
this.active = true
|
|
|
|
this.width = this.width + 'px'
|
2018-05-31 05:22:12 +00:00
|
|
|
this.isSticky = true
|
2017-07-06 09:56:17 +00:00
|
|
|
},
|
2019-01-24 03:14:23 +00:00
|
|
|
handleReset() {
|
2017-08-22 07:43:34 +00:00
|
|
|
if (!this.active) {
|
|
|
|
return
|
|
|
|
}
|
2019-01-24 03:14:23 +00:00
|
|
|
this.reset()
|
|
|
|
},
|
|
|
|
reset() {
|
2017-08-22 07:43:34 +00:00
|
|
|
this.position = ''
|
|
|
|
this.width = 'auto'
|
|
|
|
this.active = false
|
2018-05-31 05:22:12 +00:00
|
|
|
this.isSticky = false
|
2017-07-06 09:56:17 +00:00
|
|
|
},
|
2017-08-22 07:43:34 +00:00
|
|
|
handleScroll() {
|
2019-01-24 05:48:19 +00:00
|
|
|
const width = this.$el.getBoundingClientRect().width
|
|
|
|
this.width = width || 'auto'
|
2017-08-22 07:43:34 +00:00
|
|
|
const offsetTop = this.$el.getBoundingClientRect().top
|
2018-05-31 09:16:24 +00:00
|
|
|
if (offsetTop < this.stickyTop) {
|
2017-08-22 07:43:34 +00:00
|
|
|
this.sticky()
|
|
|
|
return
|
|
|
|
}
|
2019-01-24 03:14:23 +00:00
|
|
|
this.handleReset()
|
2018-05-31 02:49:11 +00:00
|
|
|
},
|
|
|
|
handleReize() {
|
2018-05-31 05:22:12 +00:00
|
|
|
if (this.isSticky) {
|
|
|
|
this.width = this.$el.getBoundingClientRect().width + 'px'
|
|
|
|
}
|
2017-07-06 09:56:17 +00:00
|
|
|
}
|
2017-08-22 07:43:34 +00:00
|
|
|
}
|
|
|
|
}
|
2017-04-18 07:09:13 +00:00
|
|
|
</script>
|