vue+vant实现浮动导航栏点击定位到模块，且选中效果随滚动切换

1.主页面中导入浮动导航栏（使用vant的粘性布局sticky组件，使首屏下方的导航栏随页面滚动浮动在想要的位置）：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

<template>   <div class="app-container">     <!-- 浮动导航 -->     <van-sticky       style="         z-index: 1;         position: absolute;         top: 12.34rem;         left: 0;         width: 100%;         height: 0.76rem;       "       offset-top="0.95rem"     >       <tabs-index />     </van-sticky>     <top-index @login="toLogin" @bind="toBindRole" /> // 这里省略页面的主要内容（即浮动栏可切换的模块内容）     <foot-index />     <login-index ref="login" />     <bind-index ref="bind" />   </div> </template>   <script> import store from "@/store"; import { mapGetters, mapActions } from "vuex"; import TabsIndex from "@/components/TheTabs/TabsIndex"; import TopIndex from "@/components/TheTop/TopIndex"; import LoginIndex from "@/components/TheLogin/LoginIndex"; import BindIndex from "@/components/TheBindRule/BindIndex"; import FootIndex from "@/components/TheFoot/FootIndex";   export default {   name: "App",   components: {     TopIndex,     LoginIndex,     TabsIndex,     BindIndex,     FootIndex,   },   computed: {     ...mapGetters(["token", "roleId"]),   },   mounted() {   },   methods: {     ...mapActions([       "setUser",       "setPhone",     ]),   }, }; </script>

　　

2.导航栏代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179

<!-- tabs --> <template>   <aside>     <div :class="$style.wrap" :style="{ ...otherStyle }">       <ul :class="$style.tabs">         <li           v-for="(el, index) in tabList"           :key="index"           :class="[             $style.li,             activeKey === el.value ? $style.active : '',             index === 1 && creativeInfo.status && creativeInfo.status === 1               ? $style.entries               : '',           ]"           @click="checkTab(el.value, index)"         >           <div             :class="[$style.itemText]"             :style="{               backgroundPosition:                 index === 3 && creativeInfo.vote_status === 2                   ? `${-(0.93 * 4)}rem 0`                   : `${-(0.93 * index)}rem 0`,             }"           ></div>         </li>       </ul>     </div>   </aside> </template> <script> import { mapGetters, mapActions } from "vuex";   export default {   name: "TabsIndex",   components: {},   props: {     otherStyle: {       type: Object,       default() {         return {};       },     },   },   data() {     return {       tabList: [{ value: "1" }, { value: "2" }, { value: "3" }, { value: "4" }],       activeKey: "1"     };   },   computed: {     ...mapGetters(["roleGifts", "creativeInfo"]),   },   mounted() {     window.addEventListener("scroll", this.onScroll);   },   destroyed() {     window.removeEventListener("scroll", this.onScroll);   },   methods: {     ...mapActions(["setLikeData"]),     pxToRem(num) {       const { clientWidth } = document.body;       if (clientWidth >= 750) {         return num;       }       return num * (clientWidth / 750);     },     // 点击tab     checkTab(bind_id) {       this.activeKey = bind_id;       const TARGET = {         "1": "first",         "2": "second",         "3": "third",         "4": "four",       };       if (bind_id) {         const targetObj = document.querySelector(`#j-${TARGET[bind_id]}`);         if (targetObj) {           const { offsetTop } = targetObj;           const scrollTop = offsetTop - this.pxToRem(0);           document.body.scrollTop = scrollTop;           document.documentElement.scrollTop = scrollTop;         }       }     },     onScroll(){       // 获取所有锚点元素       const targetObj = document.querySelectorAll(`.tabContent`);       // 获取所有锚点元素的offsetTop       const offsetTopArr = [];       targetObj.forEach(item => {         offsetTopArr.push(item.offsetTop);       });       // 获取当前文档流的 scrollTop       const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;       // 定义当前点亮的导航下标       let navIndex = 0;       for (let n = 0; n < offsetTopArr.length; n++) {         // 如果scrollTop大于等于第n个元素的ofssetTop，则说明第n-1个元素的内容完全不可见，此时导航索引就是n         if (scrollTop >= offsetTopArr[n]) {           navIndex = n;         }       }       this.activeKey = String(navIndex + 1);     }   }, }; </script>   <style lang="less" module> .wrap {   width: 100%;   height: 0.76rem;   display: flex;   justify-content: center;   > div:first-child {     height: 100%;   } } .li {   position: relative;   width: 23%;   height: 0.5rem;   text-align: center;   line-height: 1;   display: flex;   justify-content: center;   align-items: center;   margin: 0 1%; } .itemText {   .size(0.92rem, 0.24rem);   .background-fill("./images/tab_title.png", 500% 100%); } .active {   background-color: #d9c9c5; } .entries {   position: relative;   &::after {     content: "";     position: absolute;     top: 0;     right: 0;     width: 0.25rem;     height: 0.25rem;     .background-fill("./images/tab_new.png");   } } .tabs {   width: 6.52rem;   height: 0.76rem;   .background-fill("./images/tab_bg.png");   display: flex;   justify-content: space-between;   padding: 0.12rem 0.32rem;   box-sizing: border-box;   > li {     &::before {       content: "|";       position: absolute;       left: 102%;       bottom: 0;       top: 0.14rem;       color: #6a4a19;       font-size: 0.2rem;       pointer-events: none;     }   }   > li:last-child {     &::before {       display: none;     }   } } </style>

　　

那么这个功能就这么做完了。