vue开发浮动菜单碰到的问题的解决方案

开发浮动菜单，实现功能：

1、点击菜单项，滚动到对应位置。  2、拖动滚动条，对应的菜单项高亮显示。

效果如下图所示：

考虑到多个页面都有此效果，所以做成公共组件breadnav.vue

<template>
    <div class="nav" :class="{'is_fixed': navFixed}">
        <div v-for="(item, index) in this.menus" :key="index" @click="toClick(item.url, index)" :class="navActive === index ? 'is_active' : ''">{
  {item.title}}</div>
    </div>
</template>
<script>
/*  add by wzy at 2020/04/29
 *  menus 浮动菜单项
 *  navArr 每个菜单项对应的scrolltop值
 */
export default {
    name: 'breadnav',
    props: {
        menus: {
            type: Array,
            default() {
                return []