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個贊
添加回答
舉報