更新一下,这里用了两种办法来做吸顶导航,一种是原生的滚动监听,一种是用better-scorll监听滚动,做一个假导航,在滚动到相应位置后显示。
这种是原生的方法
html导航
<div class="contain">
<div class="nav-bar-wrap">
<ul class="banner">
<li
v-for="value in banner_list"
:key="value"
@click="clickTab(value)"
:class="{ active: value === isActive}" >
{
{
value }}
</li>
</ul>
</div>
挂载后绑定监听事件啦
mounted() {
window.addEventListener("scroll", this.handScroll);
let bann = document.querySelector(".banner");
this.bannerTop = bann.offsetTop;
console.log("offsetTop", this.bannerTop);
},
滚动事件,获取滚动高度和元素离窗口的高
handScroll() {
let scrolltop =
document.documentElement.scrollTop ||
document.body.scrollTop ||
window