HTML
非重点的代码，比如样式啥的，我就不放上来了，一笔带过
简略的写一下HTML代码，可以对照文章最后的效果图看，应该不难理解
rush:js;">
<div :style="{ marginTop: marginTop }">
<footer class="footer">
1. data ()
isFixed: false,// bar浮动
offsetTop: 0,// 触发bar浮动的阈值
marginTop: 0,// 触发bar浮动的同时 给数据列表一个margin-top 防止列表突然上移 会很突兀
advertShow: true,// 广告显示
}
2. mounted ()
// 设置bar浮动阈值为 #fixedBar 至页面顶部的距离
this.offsetTop = document.querySelector('#fixedBar').offsetTop;
// 开启滚动监听
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 实现滚动监听 导航栏置顶的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
