导航栏滚动一定位置的时候固定

写页面的时候，大部分都有导航栏，偶尔会遇到导航栏固定这个问题

自己写的东西，可以稍微借鉴一下噢

首先来写一个导航部分:

代码如下：

页面代码：

　
　　 <ul :class="{ active_nav : nav }" class="content_nav">
         <li v-for=" (item, i) in jtNav" :key="i" @click="$router.push({ path: item.path }),active = i" :class="{ active1: active === i }"> {{item.navli}} </li>
    </ul>

css样式：

.content_nav {
        height: 115px;
        color: #5f5f5f;
        line-height: 115px;
        background-color: #eee;
        font-size: 22px;
        display: flex;
        justify-content: space-around;
        position: absolute;
        left: 50%;
        li {
            cursor: pointer;
        }
        // opacity: 1;
        transform: translateX(-50%) translateY(-50%);
        a:active {
            color: #de101d;
        }
    }
    .active1 {
        color: red;
    }
    .active_nav {
        position: fixed;
        top: 10px;
        left: 50%;
        transform: translateX(-50%) translateY(0);
        z-index: 1;
    }

js代码：

 data () {
    return {
      nav: false,
      nav1: false,
      active: null,
      jtNav: [
               {
                 navli: '简介',
                 path: '/jtgk?page=1#fz'
               },
               {
                 navli: '优势',
                 path: '/jtgk?page=1#ys'
               },
                {
                 navli: '发展历程',
                 path: '/jtgk?page=1#fzlc'
               },
               {
                 navli: '股东介绍',
                 path: '/jtgk?page=1#gd'
               }
           ]
         }
      },
   mounted () {
      this.fesco()
      let navH = 540
      window.onscroll = _ => {
      var SH = document.body.scrollTop || document.documentElement.scrollTop
      if (SH >= (navH - 20)) {
        this.nav = true
      } else {
        this.nav = false
      }
    }
  }