监听页面滚动距离并固定导航栏，且导航栏随页面横向滚动而滚动

1.监听页面滚动距离

mounted() {
         window.addEventListener("scroll", this.handleScroll,true)
    },

.isFixed{
    position:fixed;
    top:135px;
    z-index:200;
}

 <div class="config-header" id="searchBar"  :class="searchBarFixed==true?'isFixed':''">
                <ul>
                    <li class="header-item seqq"  >序号(id)</li>
                    <li class="header-item xiao" >挑战类型</li>
                    <li class="header-item xiao">封面图片</li>
                    <li class="header-item xiao">挑战时间</li>
                    <li class="header-item xiao">挑战等级</li>
                    <li class="header-item">等级内容1</li>
                    <li class="header-item">等级内容2</li>
                    <li class="header-item">等级内容3</li>
                    <li class="header-item">是否配置头图</li>
                    <li class="header-item">挑战头图</li>
                    <li class="header-item">通用跳转</li>
                    <li class="header-item">挑战名称</li>
                    <li class="header-item">提示文案</li>
                    <li class="header-item">任务标签</li>
                    <li class="header-item">人群包</li>
                    <li class="header-item">过滤</li>
                    <li class="header-item">奖励弹窗内容</li>
                    <li class="header-item ctrl">操作</li>
                </ul>
            </div>

2.固定导航栏，且导航栏随页面横向滚动而滚动

 methods: {
        handleScroll (e) {
        let scrollY = e.target.scrollTop;   //获取导航来距离顶部距离 这个方法管用
        let scrollX = e.target.scrollLeft; 
        let offsetTop = document.querySelector('#searchBar').offsetTop
        if(scrollY>offsetTop){
             this.searchBarFixed = true
           document.getElementById('searchBar').style.left=-scrollX+'px';

        }else{
               this.searchBarFixed = false
        }
        // console.log(scrollX,offsetLeft)
        },
 }

3.销毁监听，防止跳到其它路由还在触发，就会出现报错

destroyed(){
        window.removeEventListener('scroll',this.handleScroll,true)
    },