html 按钮吸底,VUE实现吸底按钮

本文实例为大家分享了VUE实现吸底按钮的具体代码，供大家参考，具体内容如下

• {{ item }}

吸底按钮

export default {

name: 'test',

data() {

return {

headerFixed: false,

}

},

mounted() {

window.addEventListener('scroll', this.handleScroll)

},

destroyed() {

window.removeEventListener('scroll', this.handleScroll)

},

methods: {

handleScroll() {

const scrollTop =

window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

this.headerFixed = scrollTop > 50

},

},

}

#test {

.list-box {

padding-bottom: 50px;

}

.go {

background: pink;

text-align: center;

line-height: 50px;

width: 100%;

}

.isFixed {

position: fixed;

bottom: 0;

}

.fade-enter {

opacity: 0;

}

.fade-enter-active {

transition: opacity 0.8s;

}

.fade-leave-to {

opacity: 0;

}

.fade-leave-active {

transition: opacity 0.8s;

}

}

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。