悬浮标题栏，滚动后悬浮栏置顶

一、html部分

<div class="fix-btn" :style="sidebarWith==200?'left:210px;':'left:76px;'">
                    <div style="display: flex;flex-direction: column">
                        <div style="font-size: 14px;color: #333;font-weight: normal">
                            <span></span>
                        </div>
                        <div style="display: flex;justify-content: space-between;align-items: center">
                            <div><i-button type="default" style="width:100px;">返回</i-button></div>
                            <div style="">
                                <i-button type="default" style="width:100px;margin-right:10px;">保存</i-button>
                            </div>
                        </div>
                    </div>

                </div>

二、js部分

<script>
    new Vue({
        el: '#app',
        data: function() {
            return{
                sidebarWith: $('.sidebar').width()
            }
        },
        mounted:function(){
            $(window).resize(function() {
                return (function() {
                    _this.sidebarWith = $('.sidebar').width();
                })()
            })
            window.addEventListener("scroll", _this.fixedMenu); //监听滚动事件

//$(document).ready(function(){
	//获取元素距浏览器顶部的高度
	//var gerTop = $('.ger_tbmu').offset().top;
	//监控滚动栏scroll
	//$(document).scroll(function(){
		//获取当前滚动栏scroll的高度
		//var scrTop = $(window).scrollTop();
		//如果元素距顶部的高度 等于 当前滚动栏的高度，开始悬浮；否则清空悬浮
		//if(scrTop >= gerTop ){
		//	$('.ger_tbmu').css({'position':'fixed','top':'0','z-index':'9999'});
		//}else{
		//	$('.ger_tbmu').css({'position':'','top':'','z-index':''});
		//}
	//})
})


        },
        methods: {
            fixedMenu: function() {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                if(scrollTop > 50){
                    $('.fix-btn').css('top', '60px');
                } else {
                    $('.fix-btn').css('top', '100px');
                }
            },
        },
    })
</script>
        },
        methods: {
            fixedMenu: function() {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                if(scrollTop > 50){
                    $('.fix-btn').css('top', '60px');
                } else {
                    $('.fix-btn').css('top', '100px');
                }
            },
        },
    })
</script>

三、图片示例

默认：

 滑动滚轮后置顶：

//另附监听自定义div的滚动条事件方法

mounted() {
    this.$nextTick(() => {
      const [mainScrol] = document.getElementsByClassName('el-main') //获取div元素
      mainScrol.addEventListener('scroll', () => {
        this.scrollTop = mainScrol.scrollTop
        if (this.scrollTop > 20) {
          this.ifFixed = true  //滚动条距离大于20px的事件处理
        } else {
          this.ifFixed = false 
        }
      })
    })
  },