vue 导航栏滚动吸顶

<div style="border-bottom: 1px solid #DADADA;width: 100%;" :class="navBarFixed == true ? 'navBarWrap' :''">
　　<sidebar class="sidebar-container" /> //导航栏组件
</div>

export default {
　　name: 'Layout',
　　components: {
　　　　Navbar,
　　　　Sidebar,
　　　　AppMain,
　　　　Footer
　　},
　　data(){
　　　　return{
　　　　　　navBarFixed: false,
　　　　}
　　},
}

添加滚动监听：

mounted () {
　　window.addEventListener('scroll', this.watchScroll);
},

滚动事件绑定：

methods: {
　　watchScroll () {
　　　　var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
　　　　//  当滚动超过 50px 时，实现吸顶效果(滚动条高度当前设置为：50px)
　　　　if (scrollTop > 49) {
　　　　　　this.navBarFixed = true;
　　　　} else {
　　　　　　this.navBarFixed = false;
　　　　}
　　}
},

添加样式：

.navBarWrap{
　　position: fixed;
　　top: 0;
　　background: #fff;
　　z-index: 9;
}