日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

Vue实现导航栏吸顶效果

發布時間：2024/1/1 49 豆豆
生活随笔 收集整理的這篇文章主要介紹了 Vue实现导航栏吸顶效果 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><title>Vue實現導航欄吸頂效果</title></head><body><script src="static/js/vue.js"></script><style>body {margin: 0;}/* 背景 */#app {height: 2000px;margin: 0 auto;background-color: #eeeeee;}/* 導航 */.nav {width: 100%;height: 30px;background-color: #666666;}/* 固定導航 */.fix-nav {position: fixed;top: 0;z-index: 999;}</style><div id="app"><div id="nav" class="nav" :class="{'fix-nav': navBarFixed}"></div></div><script>const app = new Vue({el: "#app",data() {return {navBarFixed: false,};},mounted() {// 事件監聽滾動條window.addEventListener("scroll", this.watchScroll);},destroyed() {// 移除事件監聽window.removeEventListener("scroll", this.watchScroll);},methods: {watchScroll() {// 滾動的距離var scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;// 容器的高度var offsetTop = document.querySelector("#nav").offsetHeight;console.log("scrollTop=>", scrollTop, " offsetTop=>", offsetTop);// 滾動的距離如果大于了元素到頂部的距離時，實現吸頂效果if (scrollTop > offsetTop) {this.navBarFixed = true;} else {this.navBarFixed = false;}},},});</script></body> </html>

參考
Vue 事件監聽實現導航欄吸頂效果（頁面滾動后定位）

總結

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

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