一、vue实现吸顶

场景：当页面的滚动条到一定的高度，顶部的搜索框部分和内容区右侧的瞄点部分都会定位到页面中，不会随着页面的滚动而覆盖到上面

在method方法中写：

//   监听滚动条，滚动到一定的距离，侧边栏和顶部导航就会定位
     handleScroll(){
    var topScroll = document.documentElement.scrollTop;
    var widthClient=document.body.clientWidth;
            // console.log(topScroll)
            // 获取导航id
            var nav = document.getElementById("search");
             var dog = document.getElementById("img_dog");
            var target = document.getElementById("miaodian");
            // 滚动距离大于多少时执行下面事件
            if (topScroll > 150) {
                // console.log(ihkh)
                // 到了那个距离相当于给了导航定位
                this.show=false;
                nav.style.position = 'fixed';
                nav.style.width='100%';
                nav.style.height='70px';
                dog.style.width='30%';
                nav.style.backgroundColor='white'
                nav.style.top = '0';
                nav.style.zIndex = '999'
                nav.style.borderBottomColor='red'
                target.style.position = 'fixed';
                target.style.top = '120px';
            } else {
                // 小于的时候让他恢复原状
                nav.style = ''
                target.style = ''
            };
  },

然后 mounted阶段监听滚动条：

 window.addEventListener('scroll', this.handleScroll)

二、瞄点

首先瞄点是 点击导航中的内容，页面就会立马跳转到对应的区域

<!-- 侧边栏瞄点 -->
    <div class="target" id="miaodian">
        <ul>
            <li id='ms' @click="changeColor('ms')"><a href="#miaosha"><span style="width:2em">京东秒杀</span></a></li>
            <li id="yx" @click="changeColor('yx')"><a href="#youxuan">特色优选</a></li>
            <li id="pd" @click="changeColor('pd')"><a href="#pindao">频道广场</a></li>
            <li id="tj" @click="changeColor('tj')"><a href="#tuijian">为你推荐</a></li>
            <li><a href="#">客服</a></li>
            <li><a href="#">反馈</a></li>
            <li><a href="#dingbu">顶部</a></li>
        </ul>
    </div>

<div style="margin-top:10px" id="pindao">
          <Row  style="margin-left:180px"> ....
          </Row>
</div>

瞄点a标签里的href  和内容的id是对应的 就可以实现瞄点关系。

瞄点高亮场景：在滚动条滚动到某个区域，瞄点导航对应的区域就会实现背景高亮

    实现思路：首先都确定下来各个区域到页面顶部的距离高度，然后监听滚动条，到达对应的区域，瞄点部分就高亮。 但是，这种情况会出现所有瞄点部分都成为高亮了，那么这个时候去控制区域的兄弟节点都取消高亮，然后再对当前的瞄点进行单独高亮。

method中添加：

  handleScroll2(){
        //得到滚动条的位置
    var topScroll = document.documentElement.scrollTop;
       //获取各个瞄点对应位置
       var miaosha = document.getElementById('miaosha');
       var youxuan = document.getElementById('youxuan');
       var tuijian = document.getElementById('tuijian');
       const miaoshaTop = miaosha.getBoundingClientRect().top;
       const youxuanTop = youxuan.getBoundingClientRect().top;
       const pindaoTop = pindao.getBoundingClientRect().top;
       const tuijianTop = tuijian.getBoundingClientRect().top;
       if(topScroll>=miaoshaTop&&topScroll<youxuanTop){
          this.changeColor('ms')
       }
       else if(topScroll>=youxuanTop&&topScroll<pindaoTop){
           this.changeColor('yx')
       }
        else if(topScroll>=pindaoTop&&topScroll<tuijianTop){
           this.changeColor('pd')
       }
       else if(topScroll>=tuijianTop){
           this.changeColor('tj')
       }
    }

 changeColor(id)
    {   //当滚动条滚动到相应的位置，对应的瞄点会变色，然后根据id获取对应的节点，找到兄弟节点，兄弟节点的所有样式成为白色
        var changeID = document.getElementById(id);//得到的是一个标签，标签可以直接通过id获取id值
       var lis = changeID.parentNode.children;//查找兄弟节点包括自己
       for(var i =0,pl= lis.length;i<pl;i++) {
          if(lis[i].id==id){
            lis[i].style.backgroundColor='red'
          }
          else{
            lis[i].style.backgroundColor='white'
          }
          }
   },

然后在mounted阶段进行滚动条监听：

 window.addEventListener('scroll', this.handleScroll2)

当直接去点击瞄点的时候，对应瞄点高亮。