前端頁面展示時，並不是導航欄都在最上面，當導航面不在頁面的最上面，而我們滑動頁面時，滑動到導航欄，讓導航欄固定在最頂部。並且在滑動到哪個部分導航欄就要被選中
html代碼：
<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>主頁</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container" id="app"> <div class="head"> <image src="image/top.png" style="width: 100%;height: 430px;"></image> </div> <div :class="menuFixed == true ? 'isFixed' :''"> <div id="menu" class="menu"> <div @click="clickTap('1')" :class="menuNum=='1' ? 'menuItem' : ''"><a :class="menuNum=='1' ? 'menuItem' : ''" href="#a1">產品簡介</a></div> <div @click="clickTap('2')" :class="menuNum=='2' ? 'menuItem' : ''"><a :class="menuNum=='2' ? 'menuItem' : ''" href="#a2">技術與創新</a></div> <div @click="clickTap('3')" :class="menuNum=='3' ? 'menuItem' : ''"><a :class="menuNum=='3' ? 'menuItem' : ''" href="#a3">產品優勢</a></div> <div @click="clickTap('4')" :class="menuNum=='4' ? 'menuItem' : ''"><a :class="menuNum=='4' ? 'menuItem' : ''" href="#a4">關於我們</a></div> </div> <div style="height: 10px;width: 100%;background-color: #eaeaea;opacity: 0.5;"></div> </div> <div id="a1">...</div> <div id="a2">...</div> <div id="a3">...</div> <div id="a4">...</div> </div> </body> </html>
css代碼
<style> .container { width: 100%; height: 100%; margin-bottom: 15px; } .head { width: 100%; height: 430px; } .isFixed{ position:fixed; width: 100%; height: 50px; background-color: #FFFFFF; top:0; left: 0; z-index:999; } .menu { width: 90%; margin-left: 5%; background-color: #FFFFFF; display: flex; flex-direction: row; justify-content: space-between; margin-top: 15px; text-align: center; } .menuItem { border-bottom: 1px #4F64DB solid; color: #4F64DB; } a { color: #444444; text-decoration: none; font-size: 14px; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; line-height: 20px; } </style>
js代碼：
<script type="text/javascript"> var app = new Vue({ el: '#app', data: { menuNum: '0', menuFixed:false, }, created() { console.log('index created function') }, mounted() { console.log('index mounted function') window.addEventListener("scroll", this.handleScroll);//監聽滑動事件 }, updated() { console.log('index updated function') }, destroyed() { console.log('index destroyed function') window.removeEventListener('scroll', this.handleScroll) //銷毀監聽滑動事件 }, methods: { clickTap(num) { this.menuNum = num }, handleScroll() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop console.log(scrollTop) //滑動的長度 var offsetTop = document.querySelector('#menu').offsetTop var offsetTop1 = document.querySelector('#a1').offsetTop var offsetTop2 = document.querySelector('#a2').offsetTop var offsetTop3 = document.querySelector('#a3').offsetTop var offsetTop4 = document.querySelector('#a4').offsetTop if (scrollTop > offsetTop) { this.menuFixed = true console.log("頁面高度大於執行操作") } else { this.menuFixed = false console.log("頁面高度小於執行操作") } if (scrollTop > offsetTop1) { this.menuNum = '1' console.log("滑到產品簡介") } else { console.log("nothing") } if (scrollTop > 947) { this.menuNum = '2' console.log("滑到技術與創新") } else { console.log("nothing") } if (scrollTop > 1300) { this.menuNum = '3' console.log("滑到產品優勢") } else { console.log("nothing") } if (scrollTop > 1900) { this.menuNum = '4' console.log("關於我們") } else { console.log("nothing") } }, } }) </script>
效果圖如下：
（1）
（2）
（3）
