需求
官网首页，导航条一开始隐藏，往下滑动鼠标，就出现导航栏（如不需要一开始隐藏，直接去掉class "clearfix" 即可 ）
html
<header id="boxFixed" class="clearfix" :class="{'is_fixed' : isFixed}">
<section class="header-box">
<img src="./src/logo2.png" alt="">
<nav>
<a>关于</a>
<a>产品功能</a>
<a>APP下载</a>
<a>免费注册使用</a>
</nav>
</section>
</header>
export default {
data(){
return {
isFixed: false,
offsetTop:0
}
},
mounted(){
window.addEventListener('scroll',this.initHeight);
this.$nextTick( () => {
this.offsetTop = document.querySelector('#boxFixed').offsetTop;
})
},
methods:{
initHeight () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
this.isFixed = scrollTop > this.offsetTop ? true : false;
},
},
destroyed () {
window.removeEventListener('scroll', this.handleScroll)
},
}
style
.clearfix{
display:none;
}
.isFixed{
position:fixed;
top:0;
left:0;
z-index:2;}
