代码实现：
html中，设置id,v-bind:class名，如下：

<ul class="box_fixed" id="boxFixed" :class="{'is_fixed' : isFixed}"></ul>

js:监听鼠标行为

        data() {
            return {
                isFixed: false,
                offsetTop: 0
            }
        },
        mounted() {
            window.addEventListener('scroll', this.initHeight);
            this.$nextTick(() => {
                //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
                this.offsetTop = document.querySelector('#boxFixed').offsetTop;
            })
        },
        methods: {
            initHeight() {
                // 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                //如果被卷曲的高度大于吸顶元素到顶端位置 的距离
                this.isFixed = scrollTop > this.offsetTop ? true : false;
            },
        },
        //回调中移除监听
        destroyed() {
            window.removeEventListener('scroll', this.handleScroll)
        }

css:设置吸顶元素宽高及实现吸顶时的 position: fixed;

 .box_fixed{
    width: 500px;
    height: 40px;
    border: 2px dashed pink;
    border-radius: 20px;
    margin: 0 auto;
    line-height: 40px;
    background: #eeeeee;
  }
  .is_fixed{
    position: fixed;
    top: 0;
    z-index: 999;
  }

效果图：

变化前

变化后

参考：
1、Vue-实现吸顶效果