首先监听滚动条
mounted() {
//事件监听滚动条
window.addEventListener('scroll', this.handleScroll)
},
获取导航到顶部的距离
handleScroll() {
//获取导航到顶部的距离
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop == 0) {
this.nav = true;
return;
} else {
this.nav = false
}
}
html代码:
<div :class="nav ? 'nav bg': 'nav'">
<div class="container">
<div class="images">
css代码
.bg {
background-color: transparent !important;
}
.nav {
width: 100%;
height: 80px;
position: fixed;