实现滚动导航条🎈

「这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」。

当我们在画一个页面渲染后很长的web页面的时候，当有一个滚动导航栏类似目录的功能后，找东西就会很方便

像当当网就有一些对图书推荐的分类板块（独家特供、主编推荐、猜你喜欢等），是通过鼠标滑动可以查看的，我们要实现的一个功能就是当我们点击导航栏中的猜你喜欢后，页面自动滑动到这一个板块

首先我们绘制滚动导航条，创建一个Vue实例，在data中准备好导航条中的内容

let vm = new Vue({
      el: '#app',
      data: {
        list:[{id: 1, name: "新书上架"},
              {id: 2, name: "独家特供"},
              {id: 3, name: "主编推荐"},
              {id: 4, name: "猜你喜欢"},
              {id: 5, name: "读者推荐"}]
      },
})

把list用 v-for 渲染到页面，使用弹性布局让它们变成一行显示

<div id="app">
    <div class="list_wrap">
      <div v-for="(item,index) in list">
        <div class="item_wrap">{{item.name}}</div>
      </div>
    </div>
  </div>

这里注意给导航条做了一个吸顶的效果 position:sticky; top:0px; 不然这个导航条就会随之页面的滚动滚上去，加了之后就会一直显示在页面顶部了

      *{
        margin: 0;
        padding: 0;
      }
      .list_wrap{
        width: 800px;
        height: 50px;
        margin: 0 auto;
        background-color: rgb(252, 240, 240);
        display: flex;
        justify-content: space-around;
        align-items: center;
        position:sticky;
	top:0px;
      }
      .item_wrap{
        width: 100px;
        height: 40px;
        background-color: rgb(252, 221, 225);
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }

这里要注意一下，for循环的外框div不能直接使用弹性布局，这样写的话弹性布局就不会生效

<div id="app">
    <div class="list_wrap" v-for="(item,index) in list">
        <div class="item_wrap">{{item.name}}</div>
    </div>
</div>

然后简单的画一下图书专栏框

<div class="content_wrap" v-for="(item,index) in list">
      <div class="content">{{item.name}}</div>
</div>

      .content{
        margin: 10px auto;
        width: 800px;
        height: 300px;
        background-color: aqua;
      }

然后我们现在就要实现点击导航条中的标题，跳转到对应的内容，我们在for循环那里加一个传递:key="index" @click="getindex(index)" 告诉点击的是哪个标题（序号），内容的排版顺序和标题一样，就可以找到对应的内容了

<div v-for="(item,index) in list" :key="index" @click="getindex(index)">
    <div class="item_wrap">{{item.name}}</div>
</div>

这里我们引用一下 jquery.min.js

    methods: {
        getindex(index){       
            var top = $(".content").eq(index).offset().top ;
            top -= 50;
            // console.log(top);
            $("html,body").animate( { scrollTop: top + "px" }) ;
        
        }
     }

查看对应序号内容的div 是页面是哪个位置， 我这里 -50 是减去导航条的高度，然后设置将页面滚动到这个位置即可完成

nice！