前端页面展示时，并不是导航栏都在最上面，当导航面不在页面的最上面，而我们滑动页面时，滑动到导航栏，让导航栏固定在最顶部。并且在滑动到哪个部分导航栏就要被选中
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=" 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; 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）
