?

<!-- 吸頂 --> <template><div class="scroll"><div class="header">header</div><div class="nav" :class="navBarFixed == true ? 'navBarWrap' :''">吸頂導航</div></div> </template><script> export default {data() {return {navBarFixed: false,};},components: {},mounted() {window.addEventListener("scroll", this.watchScroll);},methods: {watchScroll() {var scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;console.log(scrollTop)// 當滾動超過 90 時，實現吸頂效果if (scrollTop > 90) {this.navBarFixed = true;} else {this.navBarFixed = false;}}} }; </script> <style scoped> .scroll{height:2000px; } .header {height: 90px;background: red;text-align: center;color: #fff; } .nav{padding:15px;width:100%;box-sizing: border-box;background:greenyellow;text-align: center; } .navBarWrap {position:fixed;top:0;z-index:999;}</style>

?

總結

以上是生活随笔為你收集整理的vue 吸顶导航的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。