html
<template>
<div ref="viewBox" class="abc">
<div :class="{fixed:true,bg:isColor}">我是头部</div>
<div class="cont"></div>
</div>
</template>
style
<style >
.fixed{
position:fixed;
top:0;
left: 0;
z-index: 15;
color: #fff;
text-align: center;
font-size: 30px;
line-height: 60px;
width: 100%;
}
.bg{background: #000;}
.abc{
height:100vh;
overflow: auto;
/* background:yellow; */
}
.cont{
height: 2000px;
background: yellowgreen;
}
</style>
js代码
<script>
export default {
data() {
return {
// box:{}
isColor:false
};
},
methods: {
scroll_top() {
let _this = this;
_this.box = this.$refs.viewBox;
console.log(this.box);
_this.box.addEventListener("scroll", () => {
// _this.scrollTop = this.$refs.viewBox.scrollTop;
console.log(this.$refs.viewBox.scrollTop);
if(this.$refs.viewBox.scrollTop > 80){
this.isColor = true;
}else{
this.isColor = false;
}
});
}
},
mounted () {
this.scroll_top()
}
};
</script>