2 回答

TA贡献1772条经验 获得超6个赞
我认为你可以在没有 jQuery 的情况下达到预期的效果。:class=...基本上,您需要基于滚动事件(参见参考资料)的元素类(参见 参考资料)的条件@scroll=...。这个例子有帮助吗?
var app = new Vue({
el: '.scroll-demo',
data: {
scrollStatus:false,
scrollTriggerY:50
},
created:function(){
window.addEventListener("scroll", this.scrollManager);
},
methods:{
scrollManager:function(){
var scrollY = this.$refs["scrollParent"].scrollTop;
this.scrollStatus = scrollY > this.scrollTriggerY;
}
}
});
div {
border:1px solid #333;
}
.scroll-demo {
position:relative;
height:200px;
overflow:auto;
}
.main-content {
height:1000px;
}
.nav-bar {
height:30px;
background-color:grey;
}
.header-appear {
background-color:red;
position:sticky;
top:0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- just some demo app -->
<div class="scroll-demo" @scroll="scrollManager" ref="scrollParent">
<div class="nav-bar" :class="{'header-appear': scrollStatus}">...navbar...</div>
<div class="main-content">
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
</div>
</div>

TA贡献1876条经验 获得超5个赞
添加回答
举报