2 回答

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超6個(gè)贊
我認(rèn)為你可以在沒有 jQuery 的情況下達(dá)到預(yù)期的效果。:class=...基本上,您需要基于滾動(dòng)事件(參見參考資料)的元素類(參見 參考資料)的條件@scroll=...。這個(gè)例子有幫助嗎?
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貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超5個(gè)贊
根據(jù)您的文檔結(jié)構(gòu)和您希望實(shí)現(xiàn)的確切行為,可能只能通過position: sticky CSS 屬性來實(shí)現(xiàn)。它并不總是可行并且有一些限制,但值得一試。
添加回答
舉報(bào)