滑动页面到一定距离，导航栏固定在顶部

前端页面展示时，并不是导航栏都在最上面，当导航面不在页面的最上面，而我们滑动页面时，滑动到导航栏，让导航栏固定在最顶部。并且在滑动到哪个部分导航栏就要被选中

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）