HTML
非重点的代码,比如样式啥的,我就不放上来了,一笔带过
简略的写一下HTML代码,可以对照文章最后的效果图看,应该不难理解
资源信息
<div id="fixedBar" :class="{ fixedBar: isFixed }">
<div :style="{ marginTop: marginTop }">
1. data ()
advertShow: true,// 广告显示
}
2. mounted ()
// 开启滚动监听
window.addEventListener('scroll',this.handleScroll);
}
3. methods
if (scrollTop >= this.offsetTop) {
this.isFixed = true;
this.marginTop = document.querySelector('#fixedBar').offsetHeight + 'px';
} else {
this.isFixed = false;
this.marginTop = 0;
}
}
}
4. destroyed ()
以上这篇VUE 实现滚动监听 导航栏置顶的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。
原文链接:https://www.f2er.com/vue/30293.html