<template>
<div>
<router-link to="/" tag="div" class="header-abs" v-show="showAbs">
<div class="iconfont header-abs-back"></div>
</router-link>
<div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
<router-link to="/">
<div class="iconfont header-fixed-back"></div>
</router-link>
景点详情
</div>
</div>
</template>
<script>
export default {
name: "DetaiHeader",
data() {
return {
showAbs: true,
opacityStyle: {
opacity: 0,
},
};
},
methods: {
handleScroll() {
// console.log(document.documentElement.scrollTop);
const top = document.documentElement.scrollTop;
if (top > 60 && top < 140) {
let opacity = top / 140;
opacity = opacity > 1 ? 1 : opacity;
this.opacityStyle = { opacity };
this.showAbs = false;
} else {
this.showAbs = true;
}
},
},
// 一进入页面就触发;可用于初始化页面数据等
activated() {
window.addEventListener("scroll", this.handleScroll);
},
// 对全局事件进行解绑
// 这个页面即将隐藏替换成新的页面的时候会触发
deactivated() {
window.removeEventListener("scroll", this.handleScroll);
},
};
</script>
<style lang="stylus" scoped>
@import '~style/varibles.styl';
.header-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
height: $headerHeight;
line-height: $headerHeight;
text-align: center;
color: #fff;
background: $bgColor;
font-size: 0.32rem;
}
.header-fixed-back {
position: absolute;
top: 0;
left: 0;
width: 0.64rem;
text-align: center;
font-size: 0.4rem;
color: #fff;
}
.header-abs {
position: absolute;
top: 0.2rem;
left: 0.2rem;
width: 0.8rem;
height: 0.8rem;
border-radius: 0.4rem;
line-height: 0.8rem;
background: rgba(0, 0, 0, 0.8rem);
text-align: center;
}
.header-abs-back {
color: #fff;
font-size: 0.4rem;
}
</style>
vue导航栏随高度渐隐渐显
最新推荐文章于 2024-05-22 19:36:03 发布