74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
|
<template>
|
||
|
<div :style="{height:height+'px',zIndex:zIndex}">
|
||
|
<div :class="className" :style="{top:stickyTop+'px',zIndex:zIndex,position:position,width:width,height:height+'px'}">
|
||
|
<slot>
|
||
|
<div>sticky</div>
|
||
|
</slot>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
<script>
|
||
|
export default {
|
||
|
name: 'Sticky',
|
||
|
props: {
|
||
|
stickyTop: {
|
||
|
type: Number,
|
||
|
default: 0
|
||
|
},
|
||
|
zIndex: {
|
||
|
type: Number,
|
||
|
default: 1000
|
||
|
},
|
||
|
className: {
|
||
|
type: String
|
||
|
}
|
||
|
},
|
||
|
data() {
|
||
|
return {
|
||
|
active: false,
|
||
|
position: '',
|
||
|
currentTop: '',
|
||
|
width: undefined,
|
||
|
height: undefined,
|
||
|
child: null,
|
||
|
stickyHeight: 0
|
||
|
|
||
|
};
|
||
|
},
|
||
|
methods: {
|
||
|
sticky() {
|
||
|
if (this.active) {
|
||
|
return
|
||
|
}
|
||
|
this.position = 'fixed';
|
||
|
this.active = true;
|
||
|
this.width = this.width + 'px';
|
||
|
},
|
||
|
reset() {
|
||
|
if (!this.active) {
|
||
|
return
|
||
|
}
|
||
|
this.position = '';
|
||
|
this.width = 'auto'
|
||
|
this.active = false
|
||
|
},
|
||
|
handleScroll() {
|
||
|
this.width = this.$el.getBoundingClientRect().width;
|
||
|
const offsetTop = this.$el.getBoundingClientRect().top;
|
||
|
if (offsetTop <= this.stickyTop) {
|
||
|
this.sticky();
|
||
|
return
|
||
|
}
|
||
|
this.reset()
|
||
|
}
|
||
|
},
|
||
|
mounted() {
|
||
|
this.height = this.$el.getBoundingClientRect().height;
|
||
|
window.addEventListener('scroll', this.handleScroll);
|
||
|
},
|
||
|
destroyed() {
|
||
|
window.removeEventListener('scroll', this.handleScroll);
|
||
|
}
|
||
|
};
|
||
|
</script>
|