vue项目中实现监听滚动条滚动事件并滚动到固定位置

研究了两天，终于实现了自己想要的功能，先说这个功能就是监听滚动条，让他到达某个位置后停止，比如吸顶功能。这个功能我在网上查了两天，基本没有我想要的效果，全是吸顶的，无奈做了更多的功课。还有一种方法可以实现，就是position：sticky。话不多说直接看效果图
一、效果图

就是标记这一块，拉到下面的时候，停留在下面

二、如何实现
1.先来个挂载的钩子函数

 mounted () {
  this.$nextTick(function () {
      window.addEventListener('scroll', this.onScroll)
    })

然后再来个销毁，以免切换页面时出现错误

destroyed () {//离开该页面需要移除这个监听的事件
  window.removeEventListener('scroll', this.onScroll)
},

然后来写这个onScroll的方法

  onScroll() {
      // 滚动条到最顶端的距离
      var scrolled =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let aaa = this.number.length;
      //获取id为cc的div标签到父标签的距离，这里减了400，是因为视图开始就能看到4个商品
      let abc = document.getElementById("cc").offsetTop - 400;

      console.log("滚动的距离:" + scrolled, "头部的高度:" + abc);
      this.jiesuan = {
        jiesuan: false,
        fixed: scrolled <= abc
      };
    },

然后在标签里这样用，滚动条滚动距离小于div标签到父标签的距离时，显示这个jiesuan的.fixed的class属性。

同时，还要在return里写上这个fixed属性的默认值，为true

这样，就可以实现这种效果了，最后来看下css样式